对自适应的一些理解

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

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

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

http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js。

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的原理就够了。

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