一种简单的移动端屏幕适配方案

关于移动端屏幕适配的文章网上有很多，大部分都写的很好，而本文是我自己观摩各路大神的文章后的小小总结。

flexible方案

说到移动端适配，总不免会提到阿里的flexible方案。对于flexible，我总结出以下几点：

1. 使用rem实现等比缩放：

• 使用js动态设置html标签的font-size

2. 将屏幕宽度按10rem进行计算html标签的font-size

• 为了以后vh、vw兼容
• 计算非常麻烦，生产中要使用css处理器或编辑器插件辅助计算

3. 动态设置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，我们写 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-720px){
    ...
}

媒体查询不管用了，因为里面的 width 判断的就是 viewport 的宽度，固定了 viewport 之后，不管你是什么屏幕，他的 width 都是750了~
与第一种方法相比，前者设置文字大小时可以使用px，使文字不缩放；后者则无法实现文字不缩放