首先,将HTML的font-size设置为100px,方便计算然后将body的font-size设置为正常值,例如:12px,不然其他的dom都会继承HTML的font-size,导致效果差距巨大,再在index.html页面中写动态设置font-size字体大小的js代码,当浏览器发生变化的时候,内容和位置也会相应发生变化,
当设计图是1920时,规定HTML的font-size的值就是100,当浏览器窗口为1920时,1rem = 100px
如下:
function setRem() {
let designSize = 1920; // 设计图尺寸
let html = document.documentElement;
let wW = html.clientWidth;// 窗口宽度
let rem = wW * 100 / designSize;
document.documentElement.style.fontSize = rem + 'px';
}
window.addEventListener('load',setRem)
window.addEventListener('resize',setRem)
然后在组件中使用scss语法,设置一个自动换算px的函数,方便修改,并且一目了然
@function px2rem($px) {
$rem: 100px;
@return ( $px / $rem) + rem;
}
此时一个margin-top为120px的边距的rem值为1.2rem
这时,我们只需要在使用px的地方使用 px2rem这个方法,就能自动换算成rem单位的大小,例如:
.circle {
width: px2rem(10px);
height: px2rem(10px);
border-radius: 50%;
background: red;
}