1. 程式人生 > >JS動態計算rem

JS動態計算rem

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);