关于lib-flexible
1. 解读
lib-flexible会自动在html的head中添加一个meta name="viewport"的标签，同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px，此时1rem应该等于75px。假如量的某个元素的宽度是150px，那么在css里面定义这个元素的宽度就是 width: 2rem。但是当分辨率大于某个特定值时，它便不再生效。
2. 移动端适配步骤
一般而言，lib-flexible并不独立出现，而是搭配px2rem-loader一起做适配方案，目的是自动将css中的px转换成rem。
以下为它在vue中的使用：
2.1 安装 lib-flexible
npm install lib-flexible --save-dev
2.2 引入 lib-flexible
在 main.js中引入lib-flexible
// px2rem 自适应
import 'lib-flexible'
2.3 安装 px2rem-loader
npm install px2rem-loader --save-dev
2.4 配置 px2rem-loader
分两种情况：
vue-cli 2.x
vue-cli 3.x
2.4.1 第1种
如果是2.x版本
在
build/utils.js中，找到exports.cssLoaders，作出如下修改：
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUint: 75 // 以设计稿750为例， 750 / 10 = 75
}
}
继续找到
generateLoaders中的loaders配置，作出如下配置：
// 注释掉这一行
// const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
// 修改为
const loaders = [cssLoader, px2remLoader]
if (options.usePostCSS) {
loaders.push(postcssLoader)
}
重新
npm run dev，完成。
2.4.1 第2种
如果是3.x版本，由于3.x版本需要自己配置，在项目根目录新建文件vue.config.js，然后如下配置：
module.exports = {
css: {
loaderOptions: {
css: {},
postcss: {
plugins: [
require('postcss-px2rem')({
// 以设计稿750为例， 750 / 10 = 75
remUnit: 75
}),
]
}
}
},
};
然后，重新npm run dev，完成。
3. 大屏
以1920 x 1080设计稿为例
3.1 找到源码
打开./node_modules/lib-flexible/flexible.js，找到如下片段源码：
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
width = 540 * dpr;
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
3.2 修改源码
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
if (width / dpr < 1080) {
width = 1080 * dpr;
} else if (width / dpr > 1920) {
width = 1920 * dpr;
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
