rem手机端页面自适应完美解决方案（最新）

Posted 2020-10-05 鱼樱、、

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了rem手机端页面自适应完美解决方案（最新）相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            ! 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);
        </script>
    </head>
    <body>    
    </body>
</html>

注:不要手动设置viewport，该方案自动帮你设置！！！

代码原理

这是阿里团队的高清方案布局代码，所谓高清方案就是根据设备屏幕的DPR（设备像素比，又称DPPX，比如dpr=2时，表示1个CSS像素由4个物理像素点组成）** 动态设置 html 的font-size, 同时根据设备DPR调整页面的缩放值，进而达到高清效果**。

有何优势

引用简单，布局简便
根据设备屏幕的DPR,自动设置最合适的高清缩放。
保证了不同设备下视觉体验的一致性。（老方案是，屏幕越大元素越大；此方案是，屏幕越大，看的越多）
有效解决移动端真实1px问题（这里的1px 是设备屏幕上的物理像素）
如何使用

重要的事情说三遍！
绝不是每个地方都要用rem，rem只适用于固定尺寸！
绝不是每个地方都要用rem，rem只适用于固定尺寸！
绝不是每个地方都要用rem，rem只适用于固定尺寸！
在相当数量的布局情境中（比如底部导航元素平分屏幕宽，大尺寸元素），你必须使用百分比或者flex才能完美布局！
看过《手机端页面自适应解决方案—rem布局》的朋友，应该对rem有所了解，这里不再赘述，
此方案也是默认 1rem = 100px，所以你布局的时候，完全可以按照设计师给你的效果图写各种尺寸啦。
比如你在效果图上量取的某个按钮元素长 55px, 宽37px ，那你直接可以这样写样式：

.myBtn {
　　　　width: 0.55rem;
　　　　height: 0.37rem;
}

出处链接：http://www.jianshu.com/p/985d26b40199

以上是关于rem手机端页面自适应完美解决方案（最新）的主要内容，如果未能解决你的问题，请参考以下文章

rem手机端页面自适应布局（待修正下一篇完美布局）

手机端页面自适应解决方案—rem布局

手机端页面自适应解决方案—rem布局（该方案目前已过时）

手机端页面自适应解决方案—rem布局

手机端页面自适应解决方案