VUE3使用rem适配
rem适配问题解决
·
vue3解决rem无法使用问题
话不多说直接上实践
1. 安装rem布局包 在这里插入代码片
cnpm i amfe-flexible -S
cnpm i postcss postcss-pxtorem -D
2. 在main.js引入
import 'amfe-flexible'
3. 与src同级目录创建postcss.config.js
rootValue是设计稿大小除以10,rootValue 75.0的值其实就是代表ui设计稿的750px的像素,引用的时候css直接写宽750px就相当于100%,它会自动根据屏幕进行计算成rem,无需对原测量值进行REM的换算(这里推荐37.5,结合2x的设计图开发,因为vant的组件你会发现37.5更为适合)。
/* 需要依赖:lib-flexible、postcss-pxtorem */
module.exports = {
plugins: {
autoprefixer: {},
"postcss-pxtorem": {
rootValue: 75, // 75表示750设计稿,37.5表示375设计稿
propList: ["*"],
},
},
};
4. vue.config.js
vue.config.js无需引用任何内容,如需按设计稿走,只需在postcss.config.js中修改rootValue即可
5. 在chrome调试者工具中审查元素查看有无生效
可以看到已经生效
6. 如果你不想转换成rem,就把px的单位大写PX,就可以啦。
更多推荐
已为社区贡献1条内容
所有评论(0)