移动端适配

实习期间主要在写微信端H5，遇到的最大问题就是适配各个不同尺寸的屏幕。公司就我自己一个前端，只能自己摸索着来。

方法1：媒体查询#

这是最笨工作量最大的方法了，就是一个屏幕尺寸一个屏幕尺寸的适配，当然你没办法适配到所有的手机型号，有的手机比较奇葩，同样是5.5寸，有的矮胖，有的瘦高。我的方法是以iphone6为准，然后向上适配5.5寸，向下适配4.7的iphone5，这个时候就能自适应市场上的一些主流屏幕，然后在对其他品牌手机挑一部分手动适配。

对于工作量小的项目，这个方法还是简单有效的，当然没办法覆盖所有设备，只是一个没办法的办法，这样做其实很痛苦，工作量也大。

方法2：定高不定宽#

对于流式布局的页面，我们只要把宽度设置为百分比，而高度设置为px，这样宽度就可以自适应，高度由于是流式布局，损失一点美感，再搭配简单的媒体查询，不会对布局造成太大的影响。

不过我在工作中写的最多的是一些比较不常规的页面，比如下面的这个蛋和锤子都是用绝对定位放上去的，这个时候不管是宽度还是高度都得照顾到。

刚开始我为了让这颗蛋乖乖待在一个位置，用媒体查询写了好多位置和大小宽度，费时费力。

方法3：神奇的 vh、vw#

css3新增的单位，相对于视窗的宽度或高度，100vh代表整个可视区域，不包括标题栏状态栏底栏等区域，详细的可以看一下张鑫旭大神的文章 视区相关单位vw, vh..简介以及可实际应用场景。

兼容性较差，有一些浏览器不支持，很明显微信内置的浏览器并不支持这个单位，扑街！

方法4：flexible#

众里寻他千百度，蓦然回首，那人却在灯火阑珊处。

在很早之前找解决方案的时候就看到这篇文章了——使用Flexible实现手淘H5页面的终端适配。

当时工作赶得比较紧（其实是自己懒没仔细看），以为要用到grunt还需要打包发布，是用在手淘这种大项目，不适合自己捣鼓的小页面，所以就略过了......

后来找个时间好好拜读了之前的那篇文章，其实只需要导入一个 js 库就可以使用了。

<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

原理文章里写得很清楚，我就不废话了。简单讲就是用 js 动态改变 <meta> 标签，然后用rem作为单位，因为rem就是根据font-size来做计算的，由此对不同屏幕尺寸进行适配。

神器。以后的项目应该都会使用这个方案。

博客首发地址：https://www.jianshu.com/u/13cd86311525