移动端web开发，到底用em，rem，还是静悄悄的vw？

移动端弹性布局中，字号单位、以及包裹文字的元素宽高单位，到底是用em，rem还是vw？

先说vw和他的兄弟，vh，vmin，vmax。

1vw ＝ 1/100th viewport width

相对于视口的宽度。视口被均分为100单位的vw。

简单来说，如果可视区宽度为300px，高度为200px，那么1vw = 3px，1vh = 2px，1vmin = 2px， 1vmax = 3px。

那么我能用它来解决什么问题？

比如弹出层相对于可视区的左右和垂直居中。

.div1{
    background-color: red;
    width: 60vw; height: 60vh; 
    margin: 20vh auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
}

比如标题文字和图片的等比缩放。

在网上抄了一个vm和rem搭配使用的@media，期待有项目让我体验下这其中的酸爽。

html {
    font-size: 16px;
}

@media screen and (min- 375px) {
    html {
        /* iPhone6的375px尺寸作为16px基准，414px正好18px大小, 600 20px */
        font-size: calc(100% + 2 * (100vw - 375px) / 39);
        font-size: calc(16px + 2 * (100vw - 375px) / 39);
    }
}
@media screen and (min- 414px) {
    html {
        /* 414px-1000px每100像素宽字体增加1px(18px-22px) */
        font-size: calc(112.5% + 4 * (100vw - 414px) / 586);
        font-size: calc(18px + 4 * (100vw - 414px) / 586);
    }
}
@media screen and (min- 600px) {
    html {
        /* 600px-1000px每100像素宽字体增加1px(20px-24px) */
        font-size: calc(125% + 4 * (100vw - 600px) / 400);
        font-size: calc(20px + 4 * (100vw - 600px) / 400);
    }
}
@media screen and (min- 1000px) {
    html {
        /* 1000px往后是每100像素0.5px增加 */
        font-size: calc(137.5% + 6 * (100vw - 1000px) / 1000);
        font-size: calc(22px + 6 * (100vw - 1000px) / 1000);
    }
}

vw目前兼容性还不够，还有一些浏览器的旧版本不支持。截止到2017.4.2的兼容情况：戳我查看兼容can i use

再看不兼容的浏览器的市场占有率，其中UC在中国占了7.38%，这个数字不小。

但是谁知道呢，随着浏览器的旧版本被扫进历史垃圾堆，vw的前途也许会越来越光明。

那么到底用哪个设计单位？

个人认为，要根据所在团队的项目布局情况，来选择是否用em还是rem还是vw。

比如我们单位项目一直使用em作为单位，再@import媒体查询来实现移动端web的自适应布局。

一般来讲，很多教程是这样定制em的。（但他们没有告诉你，chrome浏览器最小字号为12px，所以就算设置了10px，也只会按12px来算。所以我打算加了第二行来试试看。）

body{
     font-size: 10px;
     -webkit-transform:scale(0.83); //chrome浏览器重置最小字号限制，慎用！用起来有点麻烦~body这个元素的宽度也跟着缩放。所以最好是在某些特殊场合需要的时候用。
}

既然10px有各种各样的问题，那不如设置成20px。反正都是为了方便计算。

嗯，这样我们的1em = 20px。假设有一个div，它的父元素就是body，设置了width = 20em, height = 20em。于是我们有了一个div，宽*高 = 400*400px。

假设我们给div设置了font-size:12px; 那么，它的子元素的1em 就变成了 12px。

当然，这种还是要根据团队项目来确定。比如我们单位是这样的：

body {
    font: 24px/1.5 "Microsoft YaHei";
}

那我如果某天增加其中一个模块的时候，按照font: 20px来写，那肯定会引起混乱。(这事真发生过，不过不是我干的。我只是改得比较烦躁的那个。不由想起一句话：如果你的代码只以通过测试样例为目标，总有人会因此哭笑不得。)

总体来说，配合以下的媒体查询，在不需要改变结构的时候，em还是比较好用的。

@media (min-device-377px) and (max-device-385px) {
    
    body{font:12px/1.5 "Microsoft Yahei";}
}

@media screen and (max-device-320px){
    body{font:12px/1.5 "Microsoft Yahei";}

    }
/*6*/
@media (min-device-320px) and (max-device-375px) {
    
    body{font:12px/1.5 "Microsoft Yahei";}
    
}
@media (min-device-375px) and (max-device-376px) {
    
    body{font:14px/1.5 "Microsoft Yahei";}
    
}

/*6+*/
@media (min-device-386px) and (max-device-400px) {
    
    body{font:13px/1.5 "Microsoft Yahei";}

}
@media (min-device-401px) and (max-device-640px) {
    body{font:15px/1.5 "Microsoft Yahei";}    
}

/* @media screen and (min-device-481px){} */
/*4 4s*/
/*@media only screen and (device-height:480px) and (-webkit-device-pixel-ratio:2){}*/

/* 5 */
/* @media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){} */

/* 1222*/
@media only screen and (min-device-1079px) and (-webkit-min-device-pixel-ratio:2.5){
    
    body{font:13px/1.5 "Microsoft Yahei";}}

下面来说说rem。rem这家伙参照html根元素来确定自身大小，无论处在哪个位置，初心不变。

font size of the root element.

可以看出：1rem=1*html元素的font-size。可配合媒介查询或者js动态计算来控制html根元素的font-size。

但是，这么方便的rem，依然有一些缺点。

被滥用的REM：

1. 基于REM的CSS在Android4.4及5.0部分机型出现布局错乱。比如一行字变成两行。
2. 雪碧图背景的坑，图标可能会出现错位。
3. 让用户感到舒适的阅读体验，是因为手持设备屏幕大小而改变的字号和可能模糊毛糙的字体，还是清晰的文字、加载流畅的图片和视频？当一个用户拿着plus这些大块头手机时，他真的是因为喜欢更大号的字吗。
4. ie8以下不支持rem。（是否考虑ie8用户的体验？个人看法，具体问题具体分析。比如，根据产品的目标用户来决定投入。比如IE8的市场份额，IE8在您的目标人群中的占比。）

所以，现在很常见的处理办法，文字用em，需要缩放的边界宽高用rem。

还可以参考淘宝这些常见移动端的源码。淘宝提供的开源的解决方案：https://github.com/amfe/lib-flexible

这里给使用iPhone的用户推荐一款小东西，叫View Source，可以用来查看网页源代码：html，css，javascript。