移动端适配

实习期间主要在写微信端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