移动端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-width: 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-width: 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-width: 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-width: 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-width:377px) and (max-device-width:385px) {
    
    body{font:12px/1.5 "Microsoft Yahei";}
}

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

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

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

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

/* @media screen and (min-device-width: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-width: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。