使用amfe-flexible和postcss-px2rem完成适配
amfe-flexible是配置可伸缩布局方案,主要是将1rem设为viewWidth/10。
postcss-px2rem是postcss的插件,用于将像素单元生成rem单位。
1 安装
安装 amfe-flexible
npm install amfe-flexible -S
安装 postcss-px2rem
npm install postcss-px2rem -S
2 在public/index.html中配置mate
<meta name="viewport" content="width=device-width,initial-scale=1.0">
3 在main.js中引入amfe-flexible
import "amfe-flexible";
4 在项目根目录创建vue.config.js 并配置
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
// 设计稿宽度的1/10
require('postcss-px2rem')({remUnit: 75}),
]
}
}
}
}
remUnit
设置为75(假设设计稿宽度为750, 设计稿宽度的1/10),表示75px将会转化为1rem。
5 重启项目
注意: 行内样式是不生效的, 如不想做适配则把样式写在行内中