rem.js
// rem等比适配配置文件
// 基准大小
const baseSize = 100;
// 设置 rem 函数
export function setRem() {
// 当前页面宽度相对于 宽的缩放比例,可根据自己需要修改。
constscale = document.documentElement.clientWidth / 1920;
// 设置页面根节点字体大小(“Math.min(scale, 2)” 指最高放大比例为2,可根据实际业务需求调整)
consthtmlFontsize = baseSize * Math.min(scale, 2);
document.documentElement.style.fontSize = htmlFontsize + "px";
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
setRem();
};
在main.js引入rem.js
安装插件
cnpm install postcss-pxtorem -D
在 Vue 项目src下创建文件postcss.config.js 并写入:
module.exports = {
plugins: {
autoprefixer: {},
"postcss-pxtorem": {
rootValue: 100, // 基准大小 1rem = 100px
propList: ["*"],
selectorBlackList: ["el-","van-"],//如果是elementui 或者 vantui 则不转rem
},
},
};
重启项目 单位使用px即可 若不转rem的地方 比如字体 px 写为Px 、pX 或者 PX即可
评论