移动端rem + vw布局

---

移动端很多人都知道可以使用bootstrap框架，但是随着时间的推移，其实rem + vw布局也非常好用。之前没有火是因为，vw在Android4.4之前的版本不兼容。bootstrap和rem + vw布局选择，如果你的客户基本都是在移动端，那么rem + vw布局可能是更好的选择。

什么是VW

就是相对于浏览器viewport尺寸的单位，具体包括下面4个：

• vw – 视区宽度百分值
• vh – 视区高度百分值
• vmin – vw或vh，取小的那个
• vmax – vw或vh，取大的那个

如何使用rem + vw布局

之前适应移动端，我是使用媒体查询的，相信不少同学也是跟我一样。但是媒体查询来适配，有个比较大的缺点, 比如说只能适配一个区间，但是我320宽度的手机匹配好了，可能在375宽的手机上就比较难看，比如可能margin太大了。况且现在手机分辨率，那是看的人眼花缭乱。如果使用rem作为基本尺寸单位，用vw来计算并设置html根的字体大小，那就能实现在各个手机分辨率下，布局完美的展现。

这是我用的一套计算公式

经过大型项目实践，下面这段CSS是最好的基于rem和vm和calc实践代码：

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);
    }
}

借用张鑫旭同学的。复制一套，然后就可以开始愉快的使用rem做布局了，在iphone6尺寸下，1rem = 16px

小插件cssrem

用过rem在移动端布局的朋友会发现，我去把所有px -> rem单位，那得算死去啊，多浪费时间啊，放心已经有人做出px -> rem单位的插件了。

webstorm和sublime都有。在github上搜cssrem。关于cssrem小提示，在sublime上有个配置文件，文件里有句：
"available_file_types": [".css", ".less", ".sass"] //起作用的文件类型
默认在.html文件里是不会启作用的。有需要就自己加