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

猜你喜欢

转载自blog.csdn.net/WanghaoDyj/article/details/83997070