vue移动端网页适配
一、安装插件
可使用以下命令安装
cnpm install amfe-flexible --save
cnpm install --save-dev autoprefixer
cnpm install --save-dev postcss-pxtorem
也可直接在package.json中添加依赖后install
"dependencies": {
"amfe-flexible": "^2.2.1"
}
"devDependencies": {
"postcss-pxtorem": "^5.1.1",
"autoprefixer": "9.8.6"
}
二、在main.js中引用
// rem h5 适配
import 'amfe-flexible';
三、vue.config.js中
1、引用
const pxtorem = require('postcss-pxtorem')
const autoprefixer = require('autoprefixer')
2、插件配置
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
// CSS前缀处理 兼容不同浏览器，这个插件主要配合打包自动添加css浏览器兼容前缀，比如-webkit-、-ms-等
autoprefixer(),
pxtorem({
rootValue: 75, //基准值(计算公式：设计图宽度/10)，设计图尺寸为750X1134(iPhone6)，基准值为750/10=75
propList: ['*']
})
]
}
}
}
}