rem自適應佈局用法及詳解
阿新 • • 發佈：2018-12-23
對於很多新同學來說，rem還是比較熟悉而又陌生的， 熟悉呢是因為rem時常出現在耳邊，陌生呢是因為又搞不清原理。
今天咱們一起來弄清楚rem到底是怎麼一回事！
原理：css3規定：1rem的大小就是根元素<html>的font-size的值。
通過設定 根元素<html>的font-size的大小，來控制整個html文件內的字型大小、元素寬高、內外邊距等，
根據移動裝置的寬度大小來實現自適應，不同的裝置都展示一致的頁面效果。rem佈局簡單分析 分三步：
第一步：前端開發者首先拿到UI設計原型稿的寬度，如 320px 或者640px或者750px;
第二部：增加指令碼
以640px設計稿為例：
<script> /*設定根元素<html>字型大小*/ function getRem() { var html = document.getElementsByTagName("html")[0]; /*獲取標籤元素<html>*/ var oWidth = document.body.clientWidth || document.documentElement.clientWidth; /*獲取裝置的寬度 ||後為相容IE低版本寫法*/ html.style.fontSize = oWidth / 6.4 + "px"; /*設定根元素<html>字型大小 計算出的值 就相當於1rem;為什麼？ 這就是rem單位的規定 1rem就等於根元素<html>字型大小*/ } /*6.4: 為設計稿寬度640px; 若是750px的設計稿 只需要將6.4改為7.5即可。 * 在手機螢幕寬度與設計稿一致時，即：oWidth = 750px 那麼上面的計算 oWidth / 6.4 + "px" 結果就是100px; html.style.fontSize = 100px *css3中規定 1rem就對應這<html>的font-size的大小，所以100px = 1rem 這樣方便大家將px轉化為rem 按照這個比例來設定字型大小、元素寬高、內外邊距等的單位為rem; *舉例：在設計稿中，某一行字型大小為14px,則我們需要在css檔案中將對應的字型設定為0.14rem; * 在設計稿中，某一個元素寬高分別為 100px與20px;則我們需要在css中將對應的寬高設定為1rem與0.2rem; */ /*頁面初始化呼叫getRem()*/ window.onload = function() { /*初始化*/ getRem(); /*getRem繫結監聽*/ window.addEventListener("resize", getRem, false); }; </script>
第三步：css檔案中記得都使用rem單位。 關鍵點：字型大小，元素寬高，內外邊距一定是根據設計稿測量得來的。對 是設計稿！ 舉例是640px寬的設計稿，