之前用到rem的地方很少，原理和具體使用不清晰，這次要好好總結一下，
先看一下rem的定義：
rem是CSS3新增的一個相對單位（root em，根em），這個單位引起了廣泛關注，這個單位與em有什么區別呢？區別在于使用rem為元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素，這個單位可謂集相對大小和絕對大小的優點于一身，通過它既可以做到只修改根元素就成比例地調整所有字體大小，又可以避免字體大小逐層復合的連鎖反應，目前，除了IE8及更早版本外，所有瀏覽器均已支持rem，對于不支持它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的宣告，這些瀏覽器會忽略用rem設定的字體大小，
舉個例子：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>rem_CSS參考手冊_web前端開發參考手冊系列</title>
<style>
html,h1{font-size:12px;}
p{font-size:2rem;}
</style>
</head>
<body>
<h1>下面的文字將是html定義的字體大小的2倍：</h1>
<p>我是html定義的12px的2倍，字體大小為24px</p>
</body>
</html>
頁面運行的效果如下：
從上面例子可以得知：定義的HTML根元素的字體大小為12px，那么對應的 1rem=12px；如果設定的根元素的字體大小為24px，那么對應的1rem=24px；
對于rem的使用有了初步的認識，那看一下在專案中是怎么具體使用的吧，
之前專案中用的是
<script src="/static/js/flexible.js"></script>
現在
<script src="/static/js/zbui.flexible.js"></script>
是對flexible.js做了一個壓縮和精簡，
下面分析一下zbui.flexible.js的具體實作，
! function(e) {
var t = e.document,
n = t.documentElement,
i = "orientationchange" in e ? "orientationchange" : "resize",
a = function e() {
var t = n.getBoundingClientRect().width;
return n.style.fontSize = 5 * Math.max(Math.min(t / 750 * 20, 14.4), 8.55) + "px", e
}();
n.setAttribute("data-dpr", e.navigator.appVersion.match(/iphone/gi) ? e.devicePixelRatio : 1), /iP(hone|od|ad)/.test(e.navigator.userAgent) && (t.documentElement.classList.add("ios"), parseInt(e.navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/)[1], 10) >= 8 && t.documentElement.classList.add("hairline")), t.addEventListener && (e.addEventListener(i, a, !1), t.addEventListener("DOMContentLoaded", a, !1))
}(window);
// 默認為320-420范圍，改成了320-540，與其他平臺保持一致，
(function() {
// 備案鏈接隱藏按鈕
if (/^\/mprod/.test(location.pathname)) {
var style = document.createElement("style");
var textNode = document.createTextNode('body footer button {display: none !important}');
style.appendChild(textNode);
document.head.appendChild(style)
}
})();
先分析一下zbui.flexible.js里面的具體實作：
return n.style.fontSize = 5 * Math.max(Math.min(t / 750 * 20, 14.4), 8.55) + "px",
這段代碼是設定HTML根元素的font-size大小，
決議如下：
var t = n.getBoundingClientRect().width;
t代表的是手機螢屏的寬度，
750代表的是UI設計圖的寬度，
如果螢屏寬度是540px，那 t / 750 * 20 = 14.4;
如果螢屏寬度是720px，那 t / 750 * 20 = 20;
Math.min(t / 750 * 20, 14.4)這個最小值是14.4，所以定義的螢屏的最大寬度是540px ,如果螢屏的寬度大于540px，根元素的字體大小和螢屏寬度是一樣的，
如果這個Math.min(t / 750 * 20, 14.4)的值小于8,.55，那么Math.max(Math.min(t / 750 * 20, 14.4), 8.55)的值就是8.55了，那這個時候t=320，也就是說螢屏小于320px時，按照320px來設定根元素的大小，
所以從以上可以得出：
設定的螢屏的寬度范圍為：320px ~ 540px；
如果螢屏大于540px ,按照540px來，如果螢屏的寬度范圍小于320px，那么這個時候按照320px來，
所以根元素的font-size大小范圍為42.6px ~ 72px
1rem對應的范圍大小是：42.6px ~ 72px
zbui.flexible.js這個檔案的作用就是根據螢屏的大小來動態地設定根元素的font-size的大小，即動態地設定1rem的大小，
這樣的話，在專案中使用rem時，根據螢屏的大小動態的設定元素的大小，實作移動端的自適應，
rem很強大！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/199103.html
標籤：其他