JS動態計算rem
阿新 • • 發佈:2018-11-13
1、什麼是rem
rem是相對於根元素(html標籤)的字型大小的單位。
2、rem實現適配的原理
核心思想:百分比佈局可實現響應式佈局,而rem相當於百分比佈局。
實現手段:動態獲取當前視口寬度width,除以一個固定的數n,得到rem的值。表示式為rem = width / n。
通過此方法,rem大小始終為width的n等分。
3、動態計算rem
let init = () => {
let width = document.documentElement.clientWidth;
document.documentElement.style.fontsize = width / 10 + 'px';
console.log(width);
}
//首次載入是計算
init();
//新增監聽,視窗發生變化時計算
window.addEventListener('resize',init);
window.addEventListener('orientationchange',init);