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设置的样式了。
发表评论 (审核通过后显示评论)：