rem-詳細理解筆記
一、rem是什麽
rem是相對於根元素html字體大小來計算的；
rem（font size of the root element）與em（font size of the element）區別，em根據其父元素字體大小設置，rem是根據網頁的根元素（html）設置字體大小。
二、rem兼容性（兼容性還是不錯的）
IE9+、Chrome、Safari、Firefox、Opera 的主流版本都支持rem
IE8及以下兼容rem可使用使用rem.js這個插件 。
三、為什麽使用rem，其布局優點是什麽
rem能等比例適配所有屏幕。
無需考慮不同尺寸屏幕的手機，同PC端寫法相同，只需要設置好參數。
<!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倍，可輸入上邊代碼實際運行一下。
四、如何使用rem
1. 根據設計圖自己去計算（如：Photoshop查看字體，計算）
2. 使用 Sass
3. 使用 Less
五、具體代碼書寫步驟
（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設計圖紙的寬寫在這裏，和最大允許寬度
六、 rem存在的問題
1、 border:0.01rem solid #ccc; 邊框的0.01rem在手機上會看不見，所以邊框的0.01rem建議使用1px替代。
2、 background-size使用rem無效，可使用百分比轉而無需適應rem
rem-詳細理解筆記