移动端rem|移动端rem + vw布局移动端rem+vw布局

移动端很多人都知道可以使用bootstrap框架，但是随着时间的推移，其实rem + vw布局也非常好用。之前没有火是因为，vw在Android4.4之前的版本不兼容。bootstrap和rem + vw布局选择，如果你的客户基本都是在移动端，那么rem + vw布局可能是更好的选择。
什么是VW
【移动端rem|移动端rem + 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文件里是不会启作用的。有需要就自己加