rem-詳細理解筆記

時間 2019-11-12

標籤 rem 詳細理解筆記简体版

原文原文鏈接

1、rem是什麼

rem是相對於根元素html字體大小來計算的；css

rem（font size of the root element）與em（font size of the element）區別，em根據其父元素字體大小設置，rem是根據網頁的根元素（html）設置字體大小。html

2、rem兼容性（兼容性仍是不錯的）

IE9+、Chrome、Safari、Firefox、Opera 的主流版本都支持rem git

IE8及如下兼容rem可以使用使用rem.js這個插件。github

3、爲何使用rem，其佈局優勢是什麼

rem能等比例適配全部屏幕。瀏覽器

無需考慮不一樣尺寸屏幕的手機，同PC端寫法相同，只須要設置好參數。app

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    *{padding: 0; margin: 0;}
    html{ font-size: 10px; }  
    .btn {
        display: block;
        margin: 100px 100px;
        width: 9rem;
        height: 6rem;
        line-height: 6rem;
        font-size: 3rem; 
        background: #6AAAEA;
        color: #fff;
        border-radius: .3rem; 
        text-align: center;    
    }
    </style>
</head>
<body>
     <div class="btn">嗨嘍Hello</div>
</body>
</html>

從上面這段代碼能夠看出，子元素的大小是根據html根元素設置的font-size值改變的。其對應的大小，我在別的博客上看到的都是以根元素爲倍數，也就是用根元素的值乘以當前元素屬性值就是當前元素的實際值；但我本身在谷歌上運行獲得的答案與他們的有些出入，實際值=倍數（根元素所設置的值）*當前元素屬性css寫的rem值*1.2，沒錯1.2.運行中多了一個1.2倍，可輸入上邊代碼實際運行一下。函數

4、如何使用rem

1. 根據設計圖本身去計算（如：Photoshop查看字體，計算）佈局

2. 使用 Sass字體

3. 使用 Less spa

5、具體代碼書寫步驟

（1）主動設置，經過媒體查詢

html {
    font-size : 20px;
}
@media only screen and (min-width: 401px){
    html {
        font-size: 25px !important;
    }
}
@media only screen and (min-width: 428px){
    html {
        font-size: 26.75px !important;
    }
}
@media only screen and (min-width: 481px){
    html {
        font-size: 30px !important; 
    }
}
@media only screen and (min-width: 569px){
    html {
        font-size: 35px !important; 
    }
}
@media only screen and (min-width: 641px){
    html {
        font-size: 40px !important; 
    }
}

（2）自動設置

1. 在HTML文件頁面的head標籤中加入一個<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. 建立一個js文件，放入一下代碼；或在html文件底部創建一和<script>標籤放入代碼也可。

(function(designWidth, maxWidth) { //兩個參數能夠傳入，desigWidth爲UI圖紙寬度，maxWidth爲UI設計稿的最大寬度值
    var doc = document,
        win = window,
        docEl = doc.documentElement,
        remStyle = document.createElement("style"),
        tid;
 
    function refreshRem() {
        var width = docEl.getBoundingClientRect().width; //獲取到的實際上是父級的右邊距離瀏覽器原點(0,0)左邊距離瀏覽器原點(0,0)的距離,即父級的寬度+兩個padding+兩個border。
        maxWidth = maxWidth || 540; //是否有maxWidth這個參數的輸入，有則maxWidth=傳參，不然maxWidth=540
        width>maxWidth && (width=maxWidth);
        var rem = width * 100 / designWidth;
        remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
    }
 
    if (docEl.firstElementChild) {
        docEl.firstElementChild.appendChild(remStyle);
    } else {
        var wrap = doc.createElement("div");
        wrap.appendChild(remStyle);
        doc.write(wrap.innerHTML);
        wrap = null;
    }
    refreshRem();//寫在if後的緣由，此函數要在viewport設置好才執行，不然會運行兩次
 
    win.addEventListener("resize", function() {
        clearTimeout(tid); //防止運行兩次
        tid = setTimeout(refreshRem, 300);
    }, false);
 
    win.addEventListener("pageshow", function(e) {
        if (e.persisted) { //瀏覽器後退的時候重新計算
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);
 
    if (doc.readyState === "complete") {
        doc.body.style.fontSize = "16px";
    } else {
        doc.addEventListener("DOMContentLoaded", function(e) {
            doc.body.style.fontSize = "16px";
        }, false);
    }
})(750, 750);//UI設計圖紙的寬寫在這裏，和最大容許寬度