一. 移动端适配
1.安装两个插件库 lib-flexible和px2rem-loader
flexible.js是淘宝官方H5移动适应解决方案
px2rem会在项目编译的过程中根据根结的font-size值将我们项目css中的px单位转成rem，
其中不需要转成rem的可以写成PX ，UI框架部分组件使用JavaScript将css作为内联样式直接写在html标签内，打包适配时不会读取相关css,所以要配置相关样式，在style中需要" !important "进行样式覆盖。
2.操作步骤
第一步:安装lib-flexible 执行 npm install lib-flexible --save
第二步: 在min.js中引入 import ‘lib-flexible’
其中:lib-flexible会自动在html的head中添加一个meta name="viewport"的标签，同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px，此时1rem应该等于75px。假如量的某个元素的宽度是150px，那么在css里面定义这个元素的宽度就是 width: 2rem。
第三步：需要使用px2rem-loader自动将css中的px转换成rem。安装px2rem-loader 执行 npm install px2rem-loader --save-dev 。
第四步：需要配置px2rem-loader ，
1.打开build/utils.js文件，找到 exports.cssLoaders 方法，在里面添加如下代码
const px2remLoader = {
loader: ‘px2rem-loader’,
options: {
remUint: 75, //75代表屏幕宽度/10，根据开发屏幕宽度配置 75=750/10
remPrecision: 8 //换算的rem保留几位小数点
}
}
2.修改 generateLoaders 方法中的 loaders
// 注释掉这一行
// const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
// 修改为
const loaders = [cssLoader, px2remLoader]
if (options.usePostCSS) {
loaders.push(postcssLoader)
}
然后重新npm run dev，打开控制台可以看到代码中的px已经被转成了rem
注意：只能做移动端的适配，pc端是不能使用的 ，我们在vue的node_modules文件夹下的lib-flexible文件夹下可以看到flexible.js中 是判断屏幕宽度，屏幕宽度大于540就会把宽度定死。
不推荐使用移动端的适配做pc端适配，如果一定要使用可以更改一下代码（慎用,没这样使用过）
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
width = width * dpr;//当屏幕宽度超过540的时候我们应该以实际宽度重新计算,从而来做到适应PC
}
var rem = width / 10;
docEl.style.fontSize = rem + ‘px’;
flexible.rem = win.rem = rem;
}pc端适配
1.安装postcss-px2rem及px2rem-loader
第一步，npm install postcss-px2rem px2rem-loader --save
第二步，在根目录src中新建util目录下新建rem.js等比适配文件
// rem等比适配配置文件
// 基准大小
const baseSize = 16
// 设置 rem 函数
function setRem () {
// 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。
const scale = document.documentElement.clientWidth / 1920
// 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + ‘px’
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
setRem()
}
第三步，在main.js中引入 rem.js 适配文件 import ‘./util/rem.js’
第四步，到vue.config.js中配置插件
// 引入等比适配插件
const px2rem = require(‘postcss-px2rem’)// 配置基本大小
const postcss = px2rem({
// 基准大小 baseSize，需要和rem.js中相同
remUnit: 16
})// 使用等比适配插件
module.exports = {
lintOnSave: true,
css: {
loaderOptions: {
postcss: {
plugins: [
postcss
]
}
}
}
}
