zoukankan      html  css  js  c++  java
  • 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[Ss]+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 {
         0.55rem;
        height: 0.37rem;
    }

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

  • 相关阅读:
    UVA 254 Towers of Hanoi
    UVA 701 The Archeologists' Dilemma
    UVA 185 Roman Numerals
    UVA 10994 Simple Addition
    UVA 10570 Meeting with Aliens
    UVA 306 Cipher
    UVA 10160 Servicing Stations
    UVA 317 Hexagon
    UVA 10123 No Tipping
    UVA 696 How Many Knights
  • 原文地址:https://www.cnblogs.com/lhl66/p/7484789.html
Copyright © 2011-2022 走看看