庞杂骚动的天下背地，总会有万变不离其宗的简朴划定规矩
文 | 啃教师 Mar.08.2016
壹 | First
前面写了两篇挪动适配相干的文章：
《挪动Web怎样做屏幕适配（一）》重点引见了怎样利于rem来处置惩罚尺寸（width、height、margin、padding等等）相干的适配。
《一个像素的border怎样完成》经由过程引见1个物理像素border的完成，引出viewport、物理像素、CSS像素的观点，以及它们之间的关联。
这是挪动适配相干的第三篇文章，引见vw、vh，然后对三篇文章做一个总结。
贰 | Second
实在，尺寸（width、height、margin、padding等等）相干的适配，除了运用rem之外，还可以运用CSS3的vh和vw。
意义是
vw代表viewport宽度的1%，即viewport宽度被划分为100份，1vw代表1份的宽度。
vh是高度。规律跟vw一样。
vmin是vh和vw中较小者；vmax是vh和vw中较大者
咋一看，不就是CSS中的百分比嘛？
div{ width = 1vw; }
等同于
div{ width:1%; } 也没错，然则当我们想完成相似九宫格图片的时刻，就可以感受到它的魔性了。
比方要完成上面的图片规划，即三张图占满一整屏，而每张图都是正方形，用vw怎样完成？代码以下：
假如运用%，地道用CSS是没法完成的，除非JS盘算动态设置。
那末vw、vh的兼容性怎样呢？看看下图caniuse.com的查询效果，挪动端安卓4.3自带浏览器不支持。
soga，看起来很简朴。那末题目来了，为何之前的文章要费那末大气力写rem？
叁 | Third
对三篇文章做一个总结
回忆上一期写1个物理像素border的完成的时刻，提到有两种完成要领：
全部页面缩放，viewport 设置 scale
单个元素缩放，transform scale
个中，对单个元素的边框举行缩放的计划没法完成圆角。而全部页面缩放的计划跟CSS规范一样完成。
vw(vh)和rem要处理的是尺寸相干的适配，对照vw(vh)跟rem的区分：
兼容性，vw不兼容安卓4.3及以下自带浏览器
px转rem的插件较为雄厚
那末，安卓4.3及以下操作系统在国内的市场份额是若干呢？友盟的统计效果是约31%，量较大。
所以较为稳妥的计划照样rem。
所以当拿到一个挪动端Web项目，我的决议计划思绪以下：
肆 | Fourth
关于挪动适配的专题另有许多，比方设计师输出若干分辨率的素材，才即节约流量，又统筹清晰度？
不管什么专题，条件是明白viewport，CSS像素和物理像素的观点以及它们之间的关联。所以到目前为止我所整理出来的三篇文章，是挪动适配学问中非常重要的基础学问。
因而迎接检察前两篇文章，写得不对的处所迎接拍砖。
博客上重要发技术文章，而民众号里除了技术文章，还会发一些深圳身旁的创业故事，前端入门，以及履历方面的东西，迎接关注。
