移动端与rem那些事

这两天在做移动端首页，总结一下移动端相关的知识点。

移动端基础

viewport

在未设置meta标签时，viewport一般为980px。
viewport主要有以下几个设置：
width：数值（不带单位），device-width
height：数值（不带单位），device-height
initial-scale：初始缩放值
minimum-scale：最小缩放值
maximum-scale：最大缩放值
user-scalable：是否允许用户缩放

dpr

dpr(device pixel ratio) = 物理像素/逻辑像素；
dpr可以通过window.devicePixelRatio获得；
在不存在缩放的情况下：
pc的dpr一般为1，即css中1px对应1px物理像素；
ip6的pdr为2，即css中1px对应2px物理像素；
ip6plus的pdr为3，即css中1px对应3px物理像素；
但是对于安卓，有一些奇葩的dpr。
dpr所带来的影响：
图片的尺寸一般要为显示尺寸 * dpr
设计稿中的1px边框需要设置为0.5px

width与device-width

在使用媒体查询设置小屏断点时要注意区分width与device-width。
在desktop上使用device-width时，不管浏览器如何缩小都是不会相应的。
而使用width是会适配浏览器缩小，但是，如果移动端页面是根据width来做，那么在电脑上缩小浏览器也可以看到移动端页面。
其实就是要区分width和device-width。
width：指的是浏览器的宽。
device-width：指的是设备屏幕的宽，设备屏幕的宽在同一设备上是不会变的。
有两个操作会影响width，一是缩小浏览器，二是设置缩放比例。
因此在分辨率2560px，dpr为2的imac，它的device-width一般是1280px，但系统一般都会针对这种情况默认设置缩放比例，例如缩放比为150%。那么实际上它的device-width就是1707px，满屏情况下width也是1707px。

调试

调试上有很多方法，我使用的是微信开发者工具，要么使用ff的webIDE也可以，要更方便的就直接使用浏览器开发者工具就好了。
有一点需要注意的是，在chrome开发者工具中，font-size就算设置小于12px也会默认为12px，但是在移动端显示是不存在这个问题的。

移动端rem设置

对rem的设置主要有两种方法，媒体查询与js动态设置。
媒体查询如果想要兼容更多的设备就要设置更多的合适的断点，因此使用js或许会更为方便一些。
假设我们拿到了750px的设计稿，至于为什么是750px，因为dpr为2时，我们需要使用750px的图才能保证在ip6上显示不失真。
在rem的设置上，有直接使用100px的也有使用75px的。
淘宝的flexiable方案所使用的就是75px。
其实使用sass或者less的话，font-size设成多少对于码代码都没有多大影响。

使用scale

var dpr,rem,scale;var doc = document.documentElement;var font = document.createElement("style");var meta =document.querySelector("meta[name='viewport']");dpr = window.devicePixelRatio || 1;rem = doc.clientWidth * dpr / 10;scale = 1/dpr;meta.setAttribute('content', 'width=' + dpr * doc.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');doc.setAttribute('data-dpr',dpr);doc.firstElementChild.appendChild(font);font.innerHTML = 'html{font-size:'+rem+'px!important}';

这种做法应该算是淘宝的flexiable的做法。
淘宝的解决方案下：
拿到750px的设计稿，默认font-size为750/10=75px；
设计稿上有一个高300px的div，那么div.height = 4rem;

不使用scale

看了一下网易的移动端，有三个需要注意的点：
1. 默认scale就为1，并且在html标签上加了个data-dpr=1的属性，可以理解为就无视dpr了吗？
2. 对于图片的处理，网易在不同的设备下都是用750px的图片，并且宽度100%。
3. 字体使用的也是rem
网易的解决方案下：
拿到750px的设计稿，默认font-size为750/7.5=100px；
设计稿上有一个高300px的div，那么div.height = 3rem;
在375的情况下，font-size设为50px。
在此基础上进行换算就可以了。

比较两种做法

两种做法的区别就在于是否根据dpr进行缩放。
dpr所带来的影响就如上文提到的那样主要有那两种。
使用缩放：
需要根据dpr设置font-size.

body{    font-size:12px}[data-dpr ="2"] body{    font-size:24px}[data-dpr = "3"] body{    font-size:36px}

不使用缩放：
使用媒体查询断点设置字体大小

@media screen and (max-width:375px){    body{        font-size:12px    }}@media screen and (max-width:414px){    body{        font-size:14px    }}