一、相容性。

目前，IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支援了rem（大膽用吧，目前幾乎所有手機瀏覽器都支援rem）

二、什麼是rem。

rem是相對於根元素html字型大小來計算的，即( 1rem = html字型大小 )

三、使用rem佈局有什麼優點。

優點可大啦，他的強大可以讓你不在考慮不同尺寸螢幕的手機，和製作PC端一樣的寫法，只需要設定好引數，就可以為所欲為了。

四、你可能會疑惑，但只要你看了這段JS後你會明白的，看不懂的小夥伴們，看了第五點的介紹你就會明白了。

不多說，上程式碼

//                            _ooOoo_
//                           o8888888o
//                           88" . "88
//                           (| -_- |)
//                            O\ = /O
//                        ____/`---'\____
//                      .   ' \\| |// `.
//                       / \\||| : |||// \
//                     / _||||| -:- |||||- \
//                       | | \\\ - /// | |
//                     | \_| ''\---/'' | |
//                      \ .-\__ `-` ___/-. /
//                   ___`. .' /--.--\ `. . __
//                ."" '< `.___\_<|>_/___.' >'"".
//               | | : `- \`.;`\ _ /`;.`/ - ` : | |
//                 \ \ `-. \_ __\ /__ _/ .-` / /
//         ======`-.____`-.___\_____/___.-`____.-'======
//                            `=---='
//
//         .............................................
//                  佛祖鎮樓                  BUG辟易
//             佛曰:
//                  寫字樓裡寫字間，寫字間里程序員；
//                  程式人員寫程式，又拿程式換酒錢。
//                  酒醒只在網上坐，酒醉還來網下眠；
//                  酒醉酒醒日復日，網上網下年復年。
//                  但願老死電腦間，不願鞠躬老闆前；
//                  賓士寶馬貴者趣，公交自行程式設計師。
//                  別人笑我忒瘋癲，我笑自己命太賤；
//                  不見滿街漂亮妹，哪個歸得程式設計師？
//                  
(function(designWidth, maxWidth) {
    var doc = document,
        win = window,
        docEl = doc.documentElement,
        remStyle = document.createElement("style"),
        tid;

    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        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();

    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);
 

五、給大家介紹下如何使用上面這段js和這段程式碼的意義。

1）用法很簡單，只需要在html檔案head最上面加入視口程式碼

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2）然後新建一個js資料夾，將我們的佛祖和動態計算html字型大小的js程式碼放進去，然後在視口下面引入，注意，引入的script標籤需要加上 async="async"，不然頁面在載入時佈局會出現短時間的亂

3)使用過程中，這段js程式碼有兩個引數可以傳入，這兩個引數就是你的設計師給你的設計稿寬度，填上就可以了，

4)使用很簡單，設計稿寬度除以100使用即可（例如：設計稿寬度300px = 3rem，採用的是除100來換算，從而使在使用過程中更方便，無需使用rem單位換算工具）

5)rem不僅僅可以用在移動端佈局，還可以用在PC端上，

例如：設計師給了你內容寬度1200px以上的設計搞要你做自適應時，你完全可以不用擔心，只需要量一下設計稿寬度，修改我們js的兩個引數修改為設計稿內容寬度即可。（提個醒，記得加上視口）

6)這段js主要是動態修改hrml字型大小，從而做到rem單位不動的情況下，自動適應所有手機端螢幕大小，想一下1rem在不同寬度手機上的值都是不一樣的，是不是很完美呢。

7)此方法內有一段程式碼是可以修改的，修改為螢幕高度會有意想不到的效果，大家可以自我思考一下。

var width = docEl.getBoundingClientRect().width;//這段程式碼可修改

8)引用了這一段js的指令碼檔案script標籤 記得加上   async="async"  屬性  不然會導致進入頁面時，頁面出現短時間錯亂問題

六、在用rem的時候可能會遇到點小坑，下面小編給大家列出來幾個經典的。

1)border:0.01rem solid #ccc;  邊框的0.01rem在手機上會看不見，所以邊框的0.01rem建議使用1px替代。

2)background-size使用rem無效，建議：修改背景圖大小不要卡死，使用百分比去控制，比如background-size: 100% auto;等

在你看完這篇文章之後，如果覺得對您有幫助，謝謝關注

（ 碼字不易，如果此文章對您有幫助，左上角麻煩點個贊，謝謝）