使用rem(使用postcss-pxtorem)
2022-12-26 本文已影响0人
xueyueshuai
1. 安装包
//安装 postcss-pxtorem
npm i postcss-pxtorem -s
2. 创建rem.js文件
在src目录新建rem文件夹(一般情况下可以创建util文件夹),新建rem.js,添加如下代码
//兼容处理
function setHtml() {
//获取设备宽度
var deviceWidth = document.documentElement.offsetWidth;
//给html标签设置fontSize,就是给rem赋值
document.documentElement.style.fontSize = deviceWidth / 375 * 10 + 'px';
}
//窗口大小变化的时候执行
window.onresize = setHtml;
//页面初始加载时也要触发
setHtml();
3. 新建 .postcssrc.js
在项目根目录新建 .postcssrc.js(注意 . 不要忘记加),添加代码如下:
module.exports = {
"plugins": {
"postcss-pxtorem": {
"rootValue": 37.5,
"propList": ["*"]
}
}
}
- 在main.js中引入
注意:路径根据自己新建的文件夹为准
import '@/rem/rem.js'
- 设置body的font-size
html {
font-size: 10px; // 相当于1rem = 10px
}
body {
font-size: 16px;
}