移动端屏幕适配

移动端 H5 页面不可遗忘的 meta 标签 viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />

这行代码的做用是设置视口的宽度（其实就是页面的宽度）等于设备宽度，页面不缩放而且也不容许用户进行缩放。

把一个普通的PC端页面（未加入上面 meta 标签的）直接放在手机端访问是能够展现彻底的，可是页面明显通过缩放。能够用 alert(document.body.clientHeight) 获取一下页面宽度，你会发现，大部分页面的宽度都是980px。再用alert(window.innerWidth)获取一下设备宽度，很明显，手机端自动将980px的页面缩放到了window.innerWidth的宽度才得以彻底展现。但这不是咱们想要的效果，咱们想要的是未经缩放，以最佳样式展示的Web页面。每个移动端页面都应该首先加入上面这行 meta 标签，这样才能确保页面获得了最佳的展示形式。

CSS 屏幕适配之媒体查询(media query)

PC 端经常使用的CSS测量单位是 px，而移动端经常使用的倒是 rem。这样作的缘由仍然是为了适配多种屏幕尺寸。怎么适配呢？首先须要弄清楚rem单位，rem是相对于DOM根元素(也就是)的字体大小的度量单位。好比说咱们设置了 html{ font-size: 16px }，而后给具体的DOM设置 p{ font-size: 2rem; height: 4rem; }，其实就至关于设置了 p{ font-size: 2*16px; height: 4*16px; }，也就是 1rem = 1*(html的fontSize)，2.5rem=2.5*(html的fontSize)。这样就很清楚了，咱们只须要控制不一样屏幕尺寸下 html 的 fontSize，页面上全部使用 rem 度量的DOM的尺寸都会相应改变。好比如下适配代码：

html{font-size: 18px}
@media only screen and (min-width:360px){html{font-size: 20px!important}}
@media only screen and (min-width:375px){html{font-size: 21px!important}}
@media only screen and (min-width:400px){html{font-size: 22px!important}}
@media only screen and (min-width:414px){html{font-size: 23px!important}}
@media only screen and (min-width:480px){html{font-size: 24px!important}}
@media only screen and (min-width:540px){html{font-size: 26px!important}}
@media only screen and (min-width:640px){html{font-size: 28px!important}}
@media only screen and (min-width:768px){html{font-size: 32px!important}}
@media only screen and (min-width:960px){html{font-size: 36px!important}}
@media only screen and (min-width:1024px){html{font-size: 46px!important}}

上面一块代码的意思就是:

1. 屏幕尺寸小于360px时，html 的 fontSize 就是18px；
2. 当屏幕尺寸位于区间 [360px, 375px] 时，html 的 fontSize 就是 20px；
3. 当屏幕尺寸位于区间 [375px, 400px] 时，html 的 fontSize 就是 21px；
4. 以此类推，若是屏幕尺寸大于 1024px 的话，html 的 fontSize 都是46px。

上面CSS媒体查询是一个区间一个区间地进行适配的，固然也可使用 JS 进行更精细的适配，但归根结底无非都是经过改变viewport的scale值和根节点html的fontSize值进行总体调整的。

设计师出 2 倍视觉稿，前端还原成 1 倍页面，是在瞎折腾？

这样作固然是有缘由的，在解释这个问题以前，先介绍一些像素小知识。

1. 物理像素（也叫设备像素）
   物理像素是显示器上最小的显示单元，电脑、电视、手机、平板这些电子设备的屏幕都是由一个个物理像素点组成的，连点成线，线再成面。在系统的调度下，每个物理像素能够且仅能够显示单独的颜色值和亮度值。
   好比 iPhone5 的屏幕有 640x1136 个物理像素，注意到了吗，物理像素的总量其实就是所谓的分辨率。分辨率越高，物理像素点就越多，屏幕上能表现的颜色值就越多，画面就越细腻。

2. 设备独立像素（也叫CSS像素，逻辑像素）
   设备独立像素的学术解释就是计算机坐标系统中的一个点，这个点表明一个能够由程序使用并控制的虚拟像素，而后由底层系统的程序转换为物理像素。怪不得都不喜欢去看这些学术性的解释，真的是佶屈聱牙，抽象难懂。
   其实在我看来，设备独立像素就是UI设计师设计工具(如Photoshop)中的像素，而UI设计师一般就在电脑上进行设计做业的，因此设备独立像素其实就是电脑屏幕上的物理像素。每个设备独立像素能够表示一个或多个颜色值和亮度值。
   iPhone5 屏幕的设备独立像素数量是 320x568，为何这么说呢，由于在普通电脑屏幕上，1 个设备独立像素是对应着 1 个物理像素的，你把 iPhone5 的屏幕贴在电脑屏幕上，那一块和iPhone5屏幕等大的电脑屏幕区域物理像素数量是多少，没错正好是320x568。嘿嘿，明白了吧，设备独立像素是设计师和前端工程师进行做业时的测量单位。

3. 设备像素比（Device Pixel Ratio）
   DPR 的计算公式以下：
   

   设备像素比 = 设备像素/设备独立像素        // 在某一方向上，x方向或y方向
   DPR 的意义就是用来表示设备会分配多少个物理像素来展现1个设备独立像素，通常是DPRxDPR个。好比由公式可计算出 iPhone5 的 DPR 为 2，那么 iPhone5 就会分配 2x2=4 个物理像素来展现1个设备独立像素。

其实如今市面上的不少机型 DPR 都是 2，也所以UI设计师为移动端所作的设计图一般是 2 倍图。为何这样作呢，拿iPhone5来讲吧，若是设计图尺寸是320x568也就是等于设备的逻辑像素数量，固然是能够的，但这样就浪费了硬件优点了，由于设计图上的1个CSS像素映射到手机屏幕上，手机屏幕会分配4个物理像素来展现它，很显然，4个物理像素的颜色值和亮度值都同样。而若是设计成2倍图，那就是等于设备的物理像素数量了，设计师能够尽情发挥，设计更细腻的画面，手机屏幕也能够充分发挥出高分辨率的优点。设计成2倍图会出现一个问题，好比原本一张图片是但愿它在手机上呈现为 100x100（CSS像素）的尺寸，结果设计师把它设计成200x200（CSS像素）的，若是直接放在手机上，也会呈现 200x200（CSS像素）的，而不是100x100（CSS像素），就会显得很是大，这时候就轮到前端工程师隆重登场了，前端在还原设计图时全部尺寸都应该减半，也就是还原成1倍页面。好比设计图上的200x200（CSS像素）的尺寸，在页面上对应地写成100x100（CSS像素），这样它在页面上就会占据100x100个CSS像素了，手机系统会分配100x100x4个物理像素去展现这100x100个CSS像素，这样就能够充分展示设计图中的色彩信息了。