对自适应的一些理解

　　最近公司在招人，对于移动端自适应的问题大部分回答的都不在我认为的答案。今天说一下自己对移动端自适应的理解，有错欢迎指正。

　　移动端自适应最重要的就是单位了，移动端的屏幕尺寸实在太多了，所以一般会用单位实现，然后大部分会定义一个移动端最大宽度，超过这个宽度的移动端也只是显示这个最大的宽度。一般我们会使用rem单位，配合vw、vh和百分比，这就可以解决移动端的自适应问题了。

　　rem应该不用多说了，建议使用手淘的就可以，很多会自己写，简单的几行代码，不过还是建议使用手淘的，不喜欢引用外部的，可以下载到本地。下载下来看看源码，手淘的有一个初始化css的代码的自执行函数，也有添加meta的函数，其中有判断android、iPhone和dpr的代码，还监听了document和window的resize、pageshow、DOMContentLoaded。可以下载了然后格式化代码简单看一下。

　　vw、vh单位其实就是百分比，针对于可视区域的百分比。一般我们也会用百分比，百分比是针对父元素的，而vw、vh则是可视区域。比如你在一个宽高定死的块元素内，定义宽度100vw，其实就是可视窗口的百分百，会超出这个父元素。

　　单位有了，再加上table、flex、grid这三个布局，移动端自适应几乎完美解决了。一般推荐使用flex，table相当于创建了一个table，grid布局是css最强大的布局。普通场景跟flex布局差不多，但是flex是一维布局，grid是二维布局。兼容性几乎也没什么问题。感兴趣的可以自己去查查。

　　移动端自适应也会有比较常见的坑，小数像素问题。比如1px边框、圆角不圆。因为小数的像素会被四舍五入，但是被舍去或者添加的小数像素会被临近的元素填充。还有，有文章说rem不支持dpr是3的情况。其它好像都问题不大了。

　　很多人会提到媒体查询，其实现在做这方面的自适应比较少了，大部分都是一套PC和一套移动端，很少会有那种不同尺寸不同布局的网站了。

　　所以下次如果面试有人问到怎么做自适应，直接回答 rem单位加上vh、vw、宽度百分比和flex布局，如果还问，简单说说rem、vh、vw的原理就够了。

　　这就是我对移动端自适应的理解了，应该会有其它一些好的方案，欢迎指点。

　　更多云南龙头科技有限公司网站案例请查看：http://www.ynlongtou.com/case.asp?id=3

　　云南龙头科技有限公司凭借多年的网站建设经验，坚持以“帮助中小企业实现网络营销化”为宗旨，成功帮助多家中小企业实现互联网信息化建设，得到了客户的一致好评。如你有任何关于网站建设的疑问，请立即点击咨询云南龙头科技有限公司资深营销专家或拨打咨询热线：13759574266，我们会详细为你一一解答你心中的疑难。