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