一种简单的移动端屏幕适配方案
关于移动端屏幕适配的文章网上有很多，大部分都写的很好，而本文是我自己观摩各路大神的文章后的小小总结。
flexible方案
说到移动端适配，总不免会提到阿里的flexible方案。对于flexible，我总结出以下几点：
- 使用rem实现等比缩放：
- 使用js动态设置html标签的font-size
- 将屏幕宽度按10rem进行计算html标签的font-size
- 为了以后vh、vw兼容
- 计算非常麻烦，生产中要使用css处理器或编辑器插件辅助计算
- 动态设置meta的scale属性
- 为了实现1px线
- 为了兼容部分安卓机，将所有安卓按dpr=1来计算，所以安卓机的1px线要另外实现
简化方案
鉴于我现在的技术环境，从我个人的技术角度看，第二点和第三点是挺没有必要，我只需要等比缩放就行了XD。所以，1px线一律使用伪元素和transform的scale实现；rem的计算方法也是尽量为了写样式时方便，故使用设计图100px 等于 样式1rem的方式计算html的font-size 。
代码如下:（必须要在所有css代码之前引入该js，以免让用户看到错乱的样式）
;(function (window) {
/* 设计图一屏的宽度，根据实际设计情况修改 */
var docWidth = 750
var doc = window.document,
docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
var refreshRem = (function setRem () {
var clientWidth = docEl.getBoundingClientRect().width
docEl.style.fontSize = 100 * (clientWidth / docWidth) + 'px'
docEl.setAttribute('style', 'font-size:' + docEl.style.fontSize + ' !important')
return setRem
})()
if (!doc.addEventListener) return
window.addEventListener(resizeEvt, refreshRem, false)
doc.addEventListener('DOMContentLoaded', refreshRem, false)
// 可在html元素添加data-dpr属性便于作细化适配
})(window)
写样式的时候，设计图上的宽50px，我们写 width:0.5rem 就可以了，换不同大小的屏幕时，会自动作等比缩放！
还有一种更粗暴的方式，就是直接设置 meta 标签里的 viewport 宽度（不知道为什么网上没人用，可能有不可解决的兼容性问题）：
<meta name="viewport" content="width=750, user-scalable=no">
750是设计图的宽度，可根据实际情况修改，然后写 css 的时候，设计图上面是100px，css 上也是写100px！
安卓4.4以下可能存在兼容性问题，需要动态设置 minimum-scale 和 maximum-scale
借用打牛的代码： legolib/smart-viewport
另外，使用了固定 viewport 后
@media (max-width:720px){
...
}
媒体查询不管用了，因为里面的 width 判断的就是 viewport 的宽度，固定了 viewport 之后，不管你是什么屏幕，他的 width 都是750了~
与第一种方法相比，前者设置文字大小时可以使用px，使文字不缩放；后者则无法实现文字不缩放
