不用再去找rem了，你想要的rem都在這

1、兼容性。

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

2、什麼是rem。

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

3、使用rem佈局有什麼優勢。

優勢可大啦，他的強大可讓你不在考慮不一樣尺寸屏幕的手機，和製做PC端同樣的寫法，只須要設置好參數，就能夠隨心所欲了。

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

很少說，上代碼

1.  

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

    

5、給你們介紹下如何使用上面這段js和這段代碼的意義。

1）用法很簡單，只須要在html文件head最上面加入視口代碼

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

2）而後新建一個js文件夾，將咱們的佛祖和動態計算html字體大小的js代碼放進去，而後在視口下面引入，就能夠了，

3)使用過程當中，這段js代碼有兩個參數能夠傳入，這兩個參數就是你的設計師給你的設計稿寬度，填上就能夠了，

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

5)rem不只僅能夠用在移動端佈局，還能夠用在PC端上，

例如：設計師給了你內容寬度1200px以上的設計搞要你作自適應時，你徹底能夠不用擔憂，只須要量一下設計稿寬度，修改咱們js的兩個參數修改成設計稿內容寬度便可。（提個醒，記得加上視口）

6)這段js主要是動態修改hrml字體大小，從而作到rem單位不動的狀況下，自動適應全部手機端屏幕大小，想一下1rem在不一樣寬度手機上的值都是不同的，是否是很完美呢。

 

7)此方法內有一段代碼是能夠修改的，修改成屏幕高度會有意想不到的效果，你們能夠自我思考一下。

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

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

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

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

在你看完這篇文章以後，若是以爲對您有幫助，謝謝關注