CSS3新機關——rem學習

近期，公司招了一個前端，看他的代碼時，有特别多的rem作為機關。對于我這種H5小菜鳥來說，沒有辦法，又被強制學習了一波。

rem是css3中新增加的一個機關屬性(font size of the root element),根據頁面的根節點的字型大小進行轉變的機關。而根節點就是<html>節點。

html{font-size:100px};
1rem=100px;

複制

如果沒有對根節點的font-size複制，則rem使用預設值16px。即

1rem=16px

。

rem可以很好解決webApp不同螢幕的适配問題，隻要動态改變font-size的值，就可以應對不同的螢幕分辨率。

html,body{ height: 100%; margin: 0; padding: 0; font-size: 14px;}//注意初始樣式必須寫在最頂部！！！！如果寫在媒體查詢底部的話就會覆寫上方的媒體查詢（因為是層疊樣式表嘛~）
@media screen and (max-width:320px ) {
    html{font-size: 12px;}
}
@media screen and (min-width:321px) and (max-width:750px ) {
    html{font-size: 14px;}
}
@media screen and (min-width:751px ) {
    html{font-size: 16px;}
}

複制

提供一個動态擷取螢幕寬度并且為font-size指派的方法。

let htmlwidth = document.documentElement.clientWidth || document.body.clientWidth;
let htmlDom = document.getElementsByTagName('html')[0];
htmlDom.style.fontSize = htmlwidth / 10 + 'px';
window.addEventListener('resize', (e) => {
  let htmlwidth = document.documentElement.clientWidth || document.body.clientWidth;
  let htmlDom = document.getElementsByTagName('html')[0];
  htmlDom.style.fontSize = htmlwidth / 10 + 'px';
})

複制