1. 安装 postcss-pxtorem
npm install postcss postcss-pxtorem --save-dev
2. 在根目录新建postcss.config.js,配置 postcss-pxtorem
// postcss.config.js
module.exports = {
plugins: {
// to edit target browsers: use "browserslist" field in package.json
// autoprefixer: {},
'postcss-pxtorem': {
rootValue: 16, // 换算比例,结果为:设计稿元素尺寸/16,比如在css文件中设置元素宽width:320px,最终页面会换算成 320 / 16 = 20rem;还需要在rem.js中根据屏幕的实际宽度计算rem的动态值,即可算出20rem的值
unitPrecision: 5, // 保留rem小数点多少位
propList: ['*'], // 需要做转化处理的属性,如`hight`、`width`、`letter-spacing`等,`*`表示全部
// propBlackList: ['font-size'], //过滤掉不需要转换的属性
minPixelValue: 12, //px小于12的不会被转换,默认 0
selectorBlackList: ['el-', /^\.ant/] // 忽略转换rem转换,正则匹配项(选择器),如:过滤点含有"el-"或以".ant"开头的选择器
// exclude: /(node_module)/ //默认false,可以(reg)利用正则表达式排除某些文件夹的方法,例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem,请把此属性设为默认值
}
}
};
3. utils文件夹下,新建一个rem.js
function setRem() {
// 配置宽度为1920px时,1rem的值为:16px;
const screenWidth = 1920;
const scale = screenWidth / 16;
const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
// 得到html的Dom元素
const htmlDom = document.getElementsByTagName('html')[0];
// 设置根元素字体大小
htmlDom.style.fontSize = htmlWidth / scale + 'px';
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
setRem();
};
4.main.js引入rem.js文件
import '@/utils/rem.js'