开发h5 网页 进行移动端适配
1.安装依赖
npm install amfe-flexible postcss-px2rem -S
amfe-flexible:是rem的适配插件。(例:750px == 10rem)
postcss-px2rem:负责将输入的px自动转为rem
2.在main.js中引用
import "amfe-flexible";
3.在 项目根目录创建vue.config.js 完成下面配置
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
// 设计稿宽度的1/10,一般为75,设计稿为750
require('postcss-px2rem')({remUnit: 75}),
]
}
}
}
}
当不想进行转换时 可以将1px 写成 1PX