摘要：复杂纷扰的世界背后，总会有万变不离其宗的简单规则文啃先生壹前面写了两篇移动适配相关的文章移动怎么做屏幕适配一重点介绍了怎样利于来处理尺寸等等相关的适配。所以到目前为止我所整理出来的三篇文章，是移动适配知识中非常重要的基础知识。
复杂纷扰的世界背后，总会有万变不离其宗的简单规则
文 | 啃先生 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项目，我的决策思路如下：
关于移动适配的专题还有很多，例如设计师输出多少分辨率的素材，才能即节省流量，又兼顾清晰度？
不管什么专题，前提是理解viewport，CSS像素和物理像素的概念以及它们之间的关系。所以到目前为止我所整理出来的三篇文章，是移动适配知识中非常重要的基础知识。
因此欢迎查看前两篇文章，写得不对的地方欢迎拍砖。
博客上主要发技术文章，而公众号里除了技术文章，还会发一些深圳身边的创业故事，前端入门，以及经验方面的东西，欢迎关注。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/55411.html
摘要：复杂纷扰的世界背后，总会有万变不离其宗的简单规则文啃先生壹前面写了两篇移动适配相关的文章移动怎么做屏幕适配一重点介绍了怎样利于来处理尺寸等等相关的适配。所以到目前为止我所整理出来的三篇文章，是移动适配知识中非常重要的基础知识。 showImg(https://segmentfault.com/img/bVti5j);复杂纷扰的世界背后，总会有万变不离其宗的简单规则 文 | 啃先生 Ma...
摘要：复杂纷扰的世界背后，总会有万变不离其宗的简单规则文啃先生壹前面写了两篇移动适配相关的文章移动怎么做屏幕适配一重点介绍了怎样利于来处理尺寸等等相关的适配。所以到目前为止我所整理出来的三篇文章，是移动适配知识中非常重要的基础知识。 showImg(https://segmentfault.com/img/bVti5j);复杂纷扰的世界背后，总会有万变不离其宗的简单规则 文 | 啃先生 Ma...
摘要：屏幕适配是一个很容易被忽略的问题，但对于精益求精的产品而言，是必不可少的。对于开发的求职者而言，也是一个必需要理解清楚的经典问题文啃先生壹移动端适配的是什么我们讨论的是网页适配多种尺寸屏幕，让网页效果看起来和设计师的设计稿一样。 屏幕适配是一个很容易被忽略的问题，但对于精益求精的产品而言，是必不可少的。对于Web开发的求职者而言，也是一个必需要理解清楚的经典问题 文 | 啃先生 Mar...
摘要：并且除了常用的端，还要考虑微信端，或者是端。所以我们要有一套机制，在端上走的代码，在端或者微信端上走端对应的代码。对于一个从零开始的移动端项目，我总结了以上这些移动开发难点，希望之后的人能少踩点坑，站在我的肩膀上提高项目开发的效率和质量。 从零搭建移动H5开发项目实战 前端H5的前世今身 在Pc的时代，前端技术无疑统治了大多数用户的交互界面！而在移动为王的今天，NA开发在早期占领了大多...
摘要：并且除了常用的端，还要考虑微信端，或者是端。所以我们要有一套机制，在端上走的代码，在端或者微信端上走端对应的代码。对于一个从零开始的移动端项目，我总结了以上这些移动开发难点，希望之后的人能少踩点坑，站在我的肩膀上提高项目开发的效率和质量。 从零搭建移动H5开发项目实战 前端H5的前世今身 在Pc的时代，前端技术无疑统治了大多数用户的交互界面！而在移动为王的今天，NA开发在早期占领了大多...
阅读 1879·2023-04-25 15:11
阅读 1636·2021-10-08 10:04
阅读 3145·2021-09-23 11:57
阅读 432·2021-09-03 10:28
阅读 1230·2021-07-26 23:38
阅读 1161·2019-08-30 15:54
阅读 498·2019-08-30 15:53
阅读 3130·2019-08-26 13:36
