vue-cli4 配置px2rem做rem移动端自适配
在实际开发中,我们需要将设计稿中的px转换成rem,然后再写入到样式中。postcss-px2rem可以帮助我们自动完成转换。一、安装依赖npm install amfe-flexible postcss-px2rem -Samfe-flexible:是rem的适配插件。(例:750px == 10rem)postcss-px2rem:负责将输入的px自动转为rem二、入口文件main.js里引入
·
在实际开发中,我们需要将设计稿中的px转换成rem,然后再写入到样式中。postcss-px2rem可以帮助我们自动完成转换。
一、安装依赖
npm install amfe-flexible postcss-px2rem -S
- amfe-flexible:是rem的适配插件。(例:750px == 10rem)
- postcss-px2rem:负责将输入的px自动转为rem
二、入口文件main.js里引入amfe-flexible
import "amfe-flexible";
三、在项目根目录创建vue.config.js文件,并完成以下配置:
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
// 设计稿宽度的1/10,一般为75,设计稿为750
require('postcss-px2rem')({remUnit: 75}),
]
}
}
}
}
更多推荐
已为社区贡献5条内容
所有评论(0)