lib-flexible基于vue的cli4.x实现移动端以及大屏幕适配
程序员文章站
2022-06-18 14:07:48
一、安装lib-flexiblenpm install lib-flexible二、安装px2rem-loadenpm install px2rem-loader三、在项目根目录新建vue.config.js进行如下配置module.exports = { css: { sourceMap:true, loaderOptions: { postcss: { plugins: [ ....
一、安装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