安装依赖包
npm install amfe-flexible
npm install postcss-px2rem
在项目入口文件main.js中引入lib-flexible
import 'amfe-flexible/index.js'
配置vue.config.js
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-px2rem')({
remUnit: 75,
exclude: /node_modules/i
})
]
}
}
},
}
remUnit: 75
这里的75是根据你的UI设计图来定的，使用的时候可以自行调整
修改public/index.html
<meta name="viewport" content="width=device-width,initial-scale=1.0">
//修改成
<meta
name="viewport"
content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
/>
重启项目
因为改了配置文件，所以重启一下项目就可以看到效果了
转载：https://blog.csdn.net/weixin_45292658/article/details/109305503
查看评论