PC端如何实现rem布局

首先要了解的是css3规定：1rem的大小就是根元素<html>的font-size的值。

所以我们为了方便计算，可以将font-size的大小设置为100px，也就是此时的1rem = 100px

initFontSize() {

        let whdef = 100 / 1366;  // 1366为设计稿的宽度，100为当前设计稿下的html标签的font-size大小，也可以为其他值，取100为了便于计算

        let wH = window.innerHeight;// 当前窗口的高度

        let wW = window.innerWidth;// 当前窗口的宽度

        let rem = wW * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值

        document.documentElement.style.fontSize = rem + 'px'; //设置html标签的font-size值

        document.documentElement.style.overflowX = 'hidden';

      }

设置为根元素html标签的font-size为100px的好处就是如果设计稿给的是px，那么直接用px的值除以100就可以得到rem的值，比如：

设计稿是在1366px宽度下，一个div的高度是20px，那么可以计算出在1366px下，这个div的高度为0.2rem(20px/100px = 0.2rem)，那么在写代码的时候直接写成height: 0.2rem 就可以了，但是在PC端用户可能会改变浏览器的宽度，那么此时需要监听浏览器的宽度变化，通过resize方法实现：

window.addEventListener('resize', () => {

        this.initFontSize();

      })

监听后需要实时更改html标签的font-size值，更新font-size后页面也会再次渲染通过rem设置的样式了。