项目到了尾声,产品加个需求,要求自适应目前主流屏幕,在我的据理力争下,可能是产品手头的砖头比较硬,我怂了
不胡扯了
正题来了
两个插件:
npm i lib-flexible -S
npm i px2rem-loader -D
yarn add postcss-px2rem
在main.js中引入
import 'lib-flexible'
在vue.config.js中加入以下代码
chainWebpack: config => {
config.module
.rule('css')
.test(/\.css$/)
.oneOf('vue')
.resourceQuery(/\?vue/)
.use('px2rem')
.loader('px2rem-loader')
.options({
remUnit: 192
})
},
css: {
loaderOptions: {
css: {},
postcss: {
plugins: [
require('postcss-px2rem')({
remUnit: 192
})
]
}
}
},
将public中的index.html视口删除
重要一步 将node_modules/lib-flexible/flexible.js中的这段改成下图所示 ![在这里插入图片描述](https://img-blog.csdnimg.cn/202006181754092.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhamllX3llYXI=,size_16,color_FFFFFF,t_70) 然后重启项目 ok