我要评论一、安装lib-flexible
npm install lib-flexible
安装完在main.js 引入
import 'lib-flexible'
二、安装px2rem-loader
npm install px2rem-loader
三、在项目根目录新建vue.config.js进行如下配置
module.exports = {
css: {
sourceMap:true,
loaderOptions: {
postcss: {
plugins: [
require('postcss-px2rem')({
// 以设计稿350为例， 350 / 10 = 35
remUnit: 35
}),
]
}
},
modules:true
},
};
注意点：
到这里540以下的屏幕应该就可以适配了，由于源码的设置超过540就起不到适配的效果，所以要简单改下源码。
到node_modules找到lib-flexible下的flexible.js文件 找到refreshRem方法
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
// if (width / dpr > 540) {
// width = 540 * dpr;
// }
if(width / dpr < 320) {
width = 320 * dpr;
}else if(width / dpr > 1100){
width = 1100 * dpr;
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
注释掉的if即为源码的设置，针对自己的需求修改。这里举例320-1100 修改完即可。
本文地址：https://blog.csdn.net/weixin_44491888/article/details/108147476
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论