移动端自适应方案

rem布局

rem是css3新引入的单位，在pc端会有兼容性的问题，对移动端比较友好。简而言之就是通过动态设置html根元素的fontsize，等比缩放元素大小来自适应移动设备。

翻了很多资料，po也测试过最好用省事的就是rem布局 ，rem布局也有新旧版，这里讲最普用的阿里团队的高清方案,也是现在淘宝m端使用的解决方案。
以下是核心js代码

 

! function(e) {
    function t(a) {
        if (i[a]) return i[a].exports;
        var n = i[a] = {
            exports: {},
            id: a,
            loaded: !1
        };
        return e[a].call(n.exports, n, n.exports, t), n.loaded = !0, n.exports
    }
    var i = {};
    return t.m = e, t.c = i, t.p = "", t(0)
}([function(e, t) {
    "use strict";
    Object.defineProperty(t, "__esModule", {
        value: !0
    });
    var i = window;
    t["default"] = i.flex = function(e, t) {
        var a = e || 100,
            n = t || 1,
            r = i.document,
            o = navigator.userAgent,
            d = o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),
            l = o.match(/U3\/((\d+|\.){5,})/i),
            c = l && parseInt(l[1].split(".").join(""), 10) >= 80,
            p = navigator.appVersion.match(/(iphone|ipad|ipod)/gi),
            s = i.devicePixelRatio || 1;
        p || d && d[1] > 534 || c || (s = 1);
        var u = 1 / s,
            m = r.querySelector('meta[name="viewport"]');
        m || (m = r.createElement("meta"), m.setAttribute("name", "viewport"), r.head.appendChild(m)), m.setAttribute("content", "width=device-width,user-scalable=no,initial-scale=" + u + ",maximum-scale=" + u + ",minimum-scale=" + u), r.documentElement.style.fontSize = a / 2 * s * n + "px"
    }, e.exports = t["default"]
}]);
flex(100, 1);

代码原理：

1.根据设备屏幕的DPR（设备像素比，比如dpr=2时，表示1个CSS像素由2X2个物理像素点组成） 动态设置 html 的font-size
2.同时根据设备DPR调整页面的缩放值，进而达到高清效果。

方案优势:

1.引用简单，布局简便(只要把js代码贴到head标签里面,就可以使用了,设计稿一般是640 或者750的,不需要进行单位换算,直接用设计稿的尺寸就可以,比如设计稿上有一个btn的高度为80px,宽度为120px,高清方案默认1rem=100px,那么 btn的宽度就设置为:)

 

.btn {
    width:0.8rem
    height:1.2rem
}