rem手機端頁面自適應完美解決方案（最新）

最後更新：2017-09-06 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：btn 物理 ipad utf-8 var value body 按鈕高清

<!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手機端頁面自適應完美解決方案（最新）

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More