1.实现rem适配,需要安装2个依赖包:
- postcss-pxtorem 是一款 postcss 插件,用于将单位转化为 rem;
- lib-flexible 用于设置 rem 基准值,安装时名称为amfe-flexible,参考官方文档:https://github.com/amfe/lib-flexible
npm i postcss-pxtorem -D
npm i amfe-flexible -S
2.在项目根目录新建 postcss.config.js 文件,里面配置为:
module.exports = {
plugins: {
autoprefixer: {
overrideBrowserslist: [
'Android >= 4.0',
'iOS >= 8',
'Chrome > 40',
'ff > 30',
'ie >= 8'
]
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*'],
},
},
}
ps:后续项目开发设计稿尺寸设置为375px,然后直接使用px开发即可实现rem适配,插件会自动将px转化为rem.
3.在main.js中引入插件 amfe-flexible
import 'amfe-flexible/index.js'
4.重新启动项目: npm run serve