JS動態計算rem

rem 量圖計算公式：

獲取比值：設備尺寸/設計圖尺寸 

例如：設備寬度尺寸為   375px 、設計圖尺寸為750px，計算獲得比值為0.5，量得設計圖上某個圖片元素寬度為 100px，實際在375px寬度的設備上此元素為 100 * 0.5 = 50 px。

故：

設置html 下font-size 默認值為 0.5px，為了計算方便一般會以100倍計算，也就是50px，如下：

@media screen and (min-width:375px) {
    html {
        font-size: 50px;
    }
}

如上，此時在375的設備上 1rem  =  50px，在寫css 的時候設置其寬度為0.5rem即可（.5rem 就等於 50px 的實際設備上的寬度，換算到ui設計圖上，也就是 100px）

img.test_img{
    width : .5rem  
}

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