1.首先下载第三方插件
npm install postcss-px2rem px2rem-loader --save
npm i lib-flexible --save
2.在根目录下面找到该文件
3.更改flexible.js 中的源码
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
// if (width / dpr > 540) {
// width = 540 * dpr;
// }
// 或者
if (width / dpr > 540) {
width = width * dpr;
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
又或者:根据自己的屏幕宽度的需求来调整if里面的判断
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
// if (width / dpr > 540) {
// width = 540 * dpr;
// }
if (width / dpr < 810) {
width = 810 * dpr;
}
if (width / dpr < 1300) {
width = 1300 * dpr;
}
if (width / dpr < 1920) {
width = 1920 * dpr;
}
if (width / dpr < 2560) {
width = 2560 * dpr;
}
var rem = width / 10;
docEl.style.fontSize = rem + "px";
flexible.rem = win.rem = rem;
}
4.更改好源码以后,在全局文件main.js中引用
import 'lib-flexible'
5.配置插件(如果我们直接在vue.config.js中配置的话,重启项目会报一个 plugins的错误,所以我们可以在根目录下新建一个文件:postcss.config.js)
// // 引入等比适配插件
const px2rem = require('postcss-px2rem')
// 配置基本大小
const postcss = px2rem({
// 配置rem基准值 基准大小 baseSize
remUnit: 192 // 基于1920的设计稿/10
})
module.exports = {
chainWebpack: (config) => {
config.module
.rule('css')
.test(/\.css$/)
.oneOf('vue')
.use('px2rem-loader')
.loader('px2rem-loader')
.options({
remUnit: 192, // 基于设计稿的十分之一
remPrecision: 8 // rem保留几位小数
})
.end()
},
css: {
loaderOptions: {
postcss: {
plugins: [postcss]
}
}
}
}