一、利用lib-flexible、postcss-plugin-px2rem插件 进行移动端rem适配。
1、第一
引入lib-flexible .
安装lib-flexible： npm i lib-flexible --save-dev
在项目的入口main.js文件中引入lib-flexible: import 'lib-flexible'，
在index.html中 是否 去掉meta name="viewport" 标签 要看框架具体情况，具体请看第四条，
2、第二
使用postcss-plugin-px2rem自动将css中的px转换成rem(真的是大大提升了我们的工作效率，棒棒的，不用自己去瞎算啊)
安装postcss-plugin-px2rem ： npm install postcss-plugin-px2rem --save-dev
3、第三 配置postcss
在根目录下 找到.postcssrc.js文件配置如下：
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
// to edit target browsers: use "browserslist" field in package.json
"autoprefixer": {},
"postcss-plugin-px2rem": {
rootValue: 75, //换算基数， 默认100 ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
// unitPrecision: 5, //允许REM单位增长到的十进制数字。
//propWhiteList: [], //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
// propBlackList: [], //黑名单
exclude: /(node_module)/, //默认false，可以(reg)利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
// selectorBlackList: [], //要忽略并保留为px的选择器
// ignoreIdentifier: false, //(boolean/string)忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
// replace: true, // (布尔值)替换包含REM的规则，而不是添加回退。
mediaQuery: false, //(布尔值)允许在媒体查询中转换px。
minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0
}
}
}4、最后，我们需要知道flexible的转换第三方ui库 某些ui库会出现显示太小的问题，具体去官网看下：
网上有许多解决办法，首先我们要知道，根源是因为移动端ui库，本来就是适配了移动端尺寸，而fliexble再去适配一次，能不变小吗？
那么就知道解决办法了，总结大致如下：
1、固定缩放比，即dpr为1，即将index.html里面 写上 视口标签
如果不写 因为 lib-flexble插件会自动计算添加，这个时候就无法固定dpr为1了。将.postcssrc.js 的postcss-plugin-px2rem的 remUnit值设置为rootValue: 75,exclude:/(node_module)/,这个时候 你三方ui库就不会自动转换 rem了，大小就与页面保持一致了
2.不固定缩放比，将
缺点：页面的基准值是以375px的尺寸来写 这样如果ui图是750px，写css时 需将px/2来写，所以不推荐
附上px2rem常用 操作：
1、给不希望转化rem的组件，设置px的时候，单位后面加上 ／* no *／即不会转化px --- 一般border也需用这个
2、如该项px不想被转化，在它转化之前就设置rem，利用VScode的px to rem，将写好的px，直接选中option+z转为rem，然后fliexble就在webpack编译的时候不去转化它了。
3、在px后面添加/*px*/,会根据dpr的不同，生成三套代码。---- 一般字体需用这个
这里推荐 移动端的ui库：vant-ui,与该适配方案完美结合使用；
vant-ui相比其他移动端ui库优势：
1. 60+ 高质量组件，组件丰富
2. 很详细完整的中英文文档
3. 支持现代浏览器以及 Android 4.0+, iOS 7+
4.在gitHub上已获得11.9K的星，用户量持续增多
5.源码由有赞团队 一直持续维护中。
6.相比其他移动端Ui库，组件更丰富齐全，功能传参方式简单易懂，文档齐全，容易上手。
至此，结束。
二、利用lib-flexible、postcss-px2rem插件 进行移动端rem适配。
1、第一
引入lib-flexible .
安装lib-flexible： npm i lib-flexible --save-dev
在项目的入口main.js文件中引入lib-flexible: import 'lib-flexible'，
在index.html中去掉meta name="viewport" 标签 因为 lib-flexble插件会自动计算添加meta name="viewport" 视口标签
2、第二
使用postcss-px2rem自动将css中的px转换成rem(真的是大大提升了我们的工作效率，棒棒的，不用自己去瞎算啊)
安装postcss-px2rem ： npm install postcss-px2rem --save-dev
3、配置postcss
在build文件夹中找到 utils.js ，配置如下：
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75 // (这里是指设计稿的宽度为 750 / 10)
}
}
function generateLoaders(loader, loaderOptions) {
const loaders = options.usePostCSS
? [cssLoader, px2remLoader]
: [cssLoader,px2remLoader ];
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
});
}
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
publicPath:'../../',
fallback: 'style-loader'
});
} else {
return ['style-loader'].concat(loaders);
}
}总结：该方法 在某些移动端UI库下 将ui库也进行转换后 显示的很小 ，解决方法 ，请参考第一种方法；
三、rem适配方法，适合窗口大小可能会改变 以及设计图小于750，或者大于750设计稿的情况
该方法，将100px为1rem，根据设计稿尺寸 缩小100就为 rem，
例如：
font-size:14px,换成rem就为0.14rem, div{width:10px;}换成rem就是div{width:0.10rem;}
/**
* 移动端自适应，移动端一定要在头
标签里面加入这段标签,以适应不同手机的视口
*/
//
//
//
//
//
//
//
fnResize()
window.onresize = function () {
fnResize()
}
function fnResize() {
var deviceWidth = document.documentElement.clientWidth || window.innerWidth
if (deviceWidth >= 750) {
deviceWidth = 750
}
if (deviceWidth <= 320) {
deviceWidth = 320
}
document.documentElement.style.fontSize = (deviceWidth / 7.5*2) + 'px'
}
postcss-plugin-px2rem
