第一步 安装依赖:
npm install amfe-flexible -S
npm install postcss-px2rem -S
第二步 main.ts文件中导入
import "amfe-flexible/index.js";
第三步 进行配置:
vue3 项目中创建 postcss.cinfig.js文件,这里是基于设计稿是750px的 如果是375的就写37.5
module.exports = {
css: {
loaderOptions: {
css: {},
postcss: {
plugins: [
require("postcss-px2rem")({
remUnit: 75
})
]
}
}
}
}
vue2 项目进行配置的:找到根目录下的.postcss.js文件
module.exports = {
plugins: {
'postcss-import': {},
'postcss-url': {},
// to edit target browsers: use "browserslist" field in package.json
autoprefixer: {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
// rootValue: 422.4,//对应设计图宽度4224*1296
// rootValue: 192,//对应设计图宽度1920*1080
rootValue: 75,
propList: ['*', '!border*'] // 表示不匹配 要是想匹配边框之类的 可以在里面用 !border* 表示不配备边框,这样不会把边框1px变成1rem
}
}
}
第四步 vscode 安装pxtorem的插件
第五步: 在项目中直接基于750的设计稿量出尺寸, 然后再将px转化为rem就可以了。