rem佈局詳解(轉)
rem自適應原理
rem是根據html的font-size大小來變化,正是基於這個出發,我們可以在每一個裝置下根據裝置的寬度設定對應的html字號,從而實現了自適應佈局。更多介紹請看這篇文章:rem是如何實現自適應佈局的。
rem的值
目前有兩種,一種是根據js來調整html的字號,另一種則是通過媒體查詢來調整字號。
使用js
;(function(designWidth, maxWidth) {
var doc = document,
win = window;
var docEl = doc.documentElement;
var tid;
var rootItem,rootStyle;
function refreshRem() { var width = docEl.getBoundingClientRect().width; if (!maxWidth) { maxWidth = 540; }; if (width > maxWidth) { width = maxWidth; } //與淘寶做法不同,直接採用簡單的rem換算方法1rem=100px var rem = width * 100 / designWidth; //相容UC開始 rootStyle="html{font-size:"+rem+'px !important}'; rootItem = document.getElementById('rootsize') || document.createElement("style"); if(!document.getElementById('rootsize')){ document.getElementsByTagName("head")[0].appendChild(rootItem); rootItem.id='rootsize'; } if(rootItem.styleSheet){ rootItem.styleSheet.disabled||(rootItem.styleSheet.cssText=rootStyle) }else{ try{rootItem.innerHTML=rootStyle}catch(f){rootItem.innerText=rootStyle} } //相容UC結束 docEl.style.fontSize = rem + "px"; }; 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); }
})(640, 640);
你可以把上面的程式碼內嵌到html的head中,換算比例是1rem=100px,為了計算方便,你可以在我的一個github專案下載完整的結構和一個壓縮的js。
專案主頁
上面程式碼中的關鍵程式碼是:
var width = docEl.getBoundingClientRect().width;
var rem = width * 100 / designWidth;
docEl.style.fontSize = rem + “px”;
第一行程式碼,獲取移動裝置的寬度,第二行,rem的值等於(裝置的寬度)x100/(設計稿寬度),第三行,設定html的字號為第二行的值。
有些人可能會注意到第二行程式碼跟淘寶的那個有所區別,區別就在於rem的換算比例,這裡你可以任意改動為實際中的情況,比如有人喜歡用20px,那你可以將上面的100改為20,換算比例則改為1rem=20px。關於上面這段程式碼可以看之前的文章:Rem精簡版實現自適應。
還有的人要用回淘寶的那個,那麼第二行程式碼可以變為var rem = width/10; 換算比例則改為根據設計稿的寬度來調整了,假設我們的設計稿寬是640的,則html的字型大小則被設為64px.則相當於1rem=64px。具體實現請看之前的文章:rem自適應佈局-flexible。
使用媒體查詢
說到底,上面的js程式碼不就是根據不同的裝置調整對應的html字號嘛,那麼我們根據實際的裝置,來加上相應的字號不就行了嗎?
我們知道html的預設字號是16px,則對應的裝置下可以通過設定對應的font-size使其有一致的縮放比例。
html {
font-size: 62.5%
}
@media only screen and (min-width: 481px) {
html {
font-size:94%!important
}
}
@media only screen and (min-width: 561px) {
html {
font-size:109%!important
}
}
@media only screen and (min-width: 641px) {
html {
font-size:125%!important
}
body {
max-width: 640px
}
}
上面的程式碼則是通過1rem=20px來換算的,從哪裡看出來呢?從最大的一個值640出發,假如你的設計稿是750的話,那你還要設計更多的媒體 查詢,換算比例保持一致就可以了。那如果我想要換算比例為1rem=100呢?按照上面的規則,最大的值為:html:font- size:100/16100%,其它的則按比例,比如480px,則為480/640(100/16*100%)。