移动端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：
- 基于REM的CSS在Android4.4及5.0部分机型出现布局错乱。比如一行字变成两行。
- 雪碧图背景的坑，图标可能会出现错位。
- 让用户感到舒适的阅读体验，是因为手持设备屏幕大小而改变的字号和可能模糊毛糙的字体，还是清晰的文字、加载流畅的图片和视频？当一个用户拿着plus这些大块头手机时，他真的是因为喜欢更大号的字吗。
- ie8以下不支持rem。（是否考虑ie8用户的体验？个人看法，具体问题具体分析。比如，根据产品的目标用户来决定投入。比如IE8的市场份额，IE8在您的目标人群中的占比。）
所以，现在很常见的处理办法，文字用em，需要缩放的边界宽高用rem。
还可以参考淘宝这些常见移动端的源码。淘宝提供的开源的解决方案：https://github.com/amfe/lib-flexible
这里给使用iPhone的用户推荐一款小东西，叫View Source，可以用来查看网页源代码：html，css，javascript。
