css3規(guī)定:1rem的大小就是根元素html的font-size的值主穗。
? ? 通過設(shè)置 根元素<html>的font-size的大小书劝,來控制整個html文檔內(nèi)的字體大小雁竞、元素寬高申眼、內(nèi)外邊距等股囊,
? ? 根據(jù)移動設(shè)備的寬度大小來實現(xiàn)自適應(yīng),不同的設(shè)備都展示一致的頁面效果谍婉。
rem寬度比例 設(shè)計稿寬度 首先:
1rem = 100px
100vw = 750px
所以
1rem = 100vw / 7.5 = 13.333333333vw
// 最后設(shè)置根元素font-size為13.333333vw即可
引入:頁面開頭出引入下面這段代碼舒憾,用于動態(tài)計算font-size
function rem(){
? ? ? ? document.documentElement.style.fontSize=document.documentElement.clientWidth / 7.5 + 'px';
? ? }
? ? rem();
? ? window.onresize = rem;這樣當(dāng)1rem = 13.333333vw時,獲得一個寬高為60px的div的rem值屡萤,直接:
div {
width: .6rem;
height: .6rem;
}