01_13.day01--基础知识&京东移动端

day01--基础知识&京东移动端

基础知识

屏幕

讲移动端这门课程,咱们先从手机开始说起,接下来我们来给大家看一张图片

看这张图片的目的时为了让大家看到关于手机屏幕的一些参数,红框内的四个参数,大家一定都不陌生,我也不陌生。不过说真的,在很久以前我看到红框里的这四个参数,我并不知道这些参数时如何的来的。那接下里我们来学习一下。

  • 屏幕尺寸(主屏尺寸)

    现在大家看到的是iphone5的尺寸图 主屏尺寸4英寸 那么这个4英寸是怎么算出来的呢?首先我们解释一下英寸,它是一个英制长度单位,很多显示设备都用英寸来作为度量单位4英寸代表的是手机屏幕对角线的长度,1英寸=2.54厘米。那这个尺寸就是通过勾股定理计算的来的.

  • 屏幕分辨率

    在iphone5的参数图片中,我们同时也看到了一个参数 屏幕分辨率 iphone5的分辨率是1136px*640px,那么这个分辨率又是怎么回事呢?
    在讲解分辨率之前,我们首先要明白一个概念,在手机上无论是呈现一条线,
    一个面,还是一张图像都是由最小的单位像素来表示的,你也可以简单理解为由一个个小方块组成的。比如大家看下面这幅图:

所以,分辨率1136px*640px的意思就是iphone5的手机屏幕在竖直方向有1136个像素块,在水平方向有640个像素块。

  • 长度单位

    刚才我们介绍了主屏尺寸,它的单位是英寸(in),其实在我们的开发中有很多单位,但无论有多少单位,他们都会被分类到绝对长度单位或相对长度单位中。

    • 相对长度单位:相对长度单位就是会随着单位的使用的地方不同,其值会发生变化。
      • 比如:em px(只在表示设备分辨率的时候) %
    • 绝对长度单位:不会随着使用环境的变化而变化,值是绝对的。
      • 比如:in(英寸) cm(厘米) mm(毫米)
  • 屏幕像素密度

    在iphone5的参数图片中,我们同时也看到了一个参数 屏幕像素密度,它是什么意思呢?其实屏幕像素密度,即屏幕对角线每英寸所拥有的像素数,英文简称PPI(Pixels(像素) Per(每) Inch(英寸)),如何计算呢?这就必须用到上面我们讲的屏幕尺寸、屏幕分辨率,我们来看一幅图:

知道了像素密度如何计算,下面来说为什么说像素是一个相对长度单位,我们来看一下iphone系列手机的PPI:

通过上面的图我们可以知道iphone3GS和iphone4的屏幕都是3.5英寸,他们的分辨率iphone3GS在水平方向320px,iphone4在水平方向640px,那么在通用的屏幕尺寸下,能容纳不同的像素个数,说明像素是一个可变大小的单位。接下来我们再来说屏幕像素密度能帮我们做什么呢?下面再来看一张图

通过上面的图示说明,在相同屏幕尺寸下PPI值越大,那么所能显示的图像越清晰

  • Retina屏幕

    如果你明白了PPI(像素密度),那么Retina屏幕对你来说非常的简单,Retina是一个苹果注册的一个屏幕的名字,他们把PPI大于320的屏幕叫做Retina屏,也就是你们现在用的除了iphone3GS之外的其他苹果设备。

  • 设备独立像素

    设备像素也叫密度无关像素,之所以有这样一个概念是因为在我们的生活中出现了很多PPI不同的手机(ipone3GS的PPI:163,iphone4的PPI:326),像素不再是统一的单位,这样会造成一个问题:同样尺寸的图片在不同PPI的手机上显示的大小不一样(尤其是屏幕一样大小的ipone3GS和iphone4)。比如:

大图是在iphone3GS(PPI:163)上显示的效果,iphone4(PPI:326)上显示的效果,但是用户却是不会关心这些细节的,他们只是希望在不同PPI的屏幕上看到看起来差不多的效果。这时我们就需要一个新的单位,我们希望这个单位能够保证图像内容在不同PPI设备上看上去差不多,这个单位就叫设备独立像素,因为这个单位和像素密度无关,因此也叫密度无关像素,这个单位在ios设备上叫:pt,在android设备上叫dp。
举例说明就是iPhone 3G(PPI为163)1dp = 1px,iPhone 4(PPI为326)1dp = 2px

通过上面例子我们不难发现dp同px是有一个对应(比例)关系的,这个对应(比例)关系是操作系统确定并处理,目的是确保不同PPI屏幕所能显示的图像大小是一致的.
那如何获取这个比例呢?

// 像素和设备独立像素的一个关系
    window.devicePixelRatio 
  • CSS像素

    刚才我们说设备独立像素是一个单位,在android开中用dp这个单位,在ios开发中用pt,那我们在移动web开发中用什么呢?就用css像素也就是px.既然pt和px有一个对应关系,那么设备像素和CSS像素有没有对应关系呢?当然有

视口(viewport)

  • 定义

    视口是用来约束网站中最顶级块元素(html)的,也就是它决定了html的大小。

  • 视口的作用

    在PC设备上viewport的大小取决于浏览器窗口的大小,以CSS像素做为度量单位。通过以往CSS的知识,我们都能理解html的大小是会影响到我们的网页布局的,而viewport又决定了html的大小,所以viewport间接决定并影响了我们网页的的布局,只不过在PC端viewport的大小和浏览器窗口大小一致,因此我们不去管他,但移动端则不同。

    移动设备屏幕普遍都是比较小的,但是大部分的网站又都是为PC设备来设计的(在移动端处于萌芽时期),要想让移动设备也可以正常显示网页,移动设备不得不做一些处理,如果能让viewport足够大,那么html也会足够大,这样就能保证原本为PC设备设计的网页页能在移动设备上正常显示。移动设备厂商也的确是这样处理的。

    在移动设备上viewport不再受限于浏览器的窗口,而是允许开发人员自由设置viewport的大小,不过浏览器会设置一个默认大小的viewport,为了能够正常显示那些专为PC设计的网页,一般这个值的大小会大于屏幕的尺寸。

从上图中我们可以得知不同的移动厂商分别设置了一个默认的viewport的值,这个值保证了大部分网页可以正常在移动设备下浏览。下面我们通过一个例子来验证上述结论:

html代码

  <div class="box">1</div>
  <div class="box">2</div>

css代码

  body {
      padding: 0;
      margin: 0;
      background-color: #F7F7F7;
  }

  .box {
      width: 490px;
      height: 200px;
      text-align: center;
      line-height: 200px;
      background-color: pink;
      float: left;
  }

经过Iphone6手机在ios10系统下的测试,我们发现网页内容和图片被缩放了,我们也得到了其他开发者的反馈,在部分android手机中也会发生网页内容和图片缩放,而另外一部分android手机会出现滚动条。那产生缩放和滚动条的原因是什么呢?

  • 详解视口

    要明白为什么会产生缩放或滚动条,我们要进一步的学习viewport(视口)。首先,在默认情况下,移动设备上的viewport是大于可视区域的。然后我们认为的把viewport分成layout viewport和ideal viewport。

    视窗布局视口(layout viewport):网页布局区域的大小(以CSS像素为单位)

    理想视口(ideal viewport):大小就是设备屏幕区域(以设备独立像素dp、pt为单位)

    理解两个viewport后我们来解释为什么网页会被缩放或出现水平滚动条,其原因在于移动设备浏览器会默认设置一个layout viewport,并且这个值会大于ideal viewport,那么我们也知道ideal viewport就是屏幕区域,layout viewport是我们布局网页的区域,那么最终layout viewport 是要显示在ideal viewport里的,而layout viewport大于ideal viewport时,于是就出现了滚动条,那么为什么有的移动设备网页内容被缩放了呢?因为有些厂商认为将网页完整显示给用户才最合理,而不该出现滚动条,所以就将layout viewport进行了缩放,使其恰好完整显示在ideal viewport(屏幕)里,其缩放比例为ideal viewport/layout viewport。

  • 视口设置

    通过刚才分析,我们知道移动端页面最理想的状态是,避免滚动条且不被默认缩放处理,那么怎么做呢?就需要设置视口

    基本语法:

    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    

    思想就是设置layout viewport=ideal viewport
    设置width=device-width 或initial-scale=1.0其中一个都可以,两个都要写的原因在于两者各有一个小缺陷,就是iphone、ipad以及IE 会横竖屏不分,通通以竖屏的ideal viewport宽度为准。所以,最完美的写法应该是,两者都写上去,这样就 initial-scale=1 解决了 iphone、ipad的毛病,width=device-width则解决了IE的毛病。

    其他设置:

    width 设置layout viewport 的宽度(带单位),为一个正整数,或字符串"device-width"

    height 设置layout viewport的高度(带单位),这个属性对我们并不重要,很少使用

    initial-scale 设置页面的初始缩放值(倍数),为一个数字

    maximum-scale 允许用户的最大缩放值(倍数),为一个数字

    minimum-scale 允许用户的最小缩放值(倍数),为一个数字

    user-scalable 否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许

  • 移动端布局方案

    • 固定布局 (很早以前其实就用的固定宽度布局的方案,只不过现在已经被废弃了)
    • 百分比布局 (特别适合于电商网站的布局) 流式布局
    • rem布局方案 (用rem这个单位来做不同手机的适配) 现在做手机端页面最好的
  • 移动端浏览器
    手机自带浏览器:safari 安卓自带浏览器
    第三方浏览器:UC qq浏览器
    应用内置浏览器(webview):微信 qq 微博
    所谓的webview就是ios开发者或者安卓开发者为我们前端提供的一个简易的浏览器
    移动端开发:
    1.类原生app(稍微复杂一点)
    2.微信开发:就是把移动端页面扔到了微信的webview中(要做的兼容比较少) hubilder

京东移动端(jdMobile)

  • 项目背景
    现在移动设备越来越多,以致于开发移动端页面的需求旺盛。为了应对诸如京东、淘宝这样的电商网站的开发,因此需要学习这些网站是如何制作的。同时京东移动端也是移动端百分比布局的代表(百分比布局不能适配所有手机)

  • 项目技术点
    1.百分比
    2.normalize与reset
    reset.css这样的css主要用于清除浏览器的默认样式
    normalize.css是一个著名的css库 作用:就是为了解决不同浏览器的兼容性 在以后工作中 用的比较多
    主要解决的是移动端开发的兼容性问题

  • 项目结构
    jdMobile(项目文件夹)

    • css(文件夹)----> 放置css文件

      • images(文件夹)----> 放置诸如网站logo,网站小图标这样的长时间不变的图片

      • upload(文件夹)----> 放置商家、用户上传的图片

      • js(文件夹) ----> 放置js文件(不过本项目不需要,放在这里的目的是让大家清楚)

      • favicon.ico ----> 网页图标

      • index.html ----> 项目首页

  • 项目代码

    基本结构

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <!-- 设置视口 -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!--告诉浏览器如果是ie系列且有edge,就用edge这个浏览器的渲染方式去渲染-->
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>专业网上购物平台品质保障!-京东商城</title>
      </head>
      <body>
    
      </body>
    </html>
    

    1.实现布局容器(注释序号的代表了写代码的顺序)

      <body>
        <div class="jdm">
          <!--1.顶部搜素-->
          <!--3.中间滚动内容-->
          <!--2.底部工具栏-->
        </div>
      </body>
    

推荐阅读更多精彩内容