一、利用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里面 寫上 <meta name="viewport" content="width=device-width,initial-scale=1.0">視口標簽
如果不寫 因為 lib-flexble插件會自動計算添加，這個時候就無法固定dpr為1了。將.postcssrc.js 的postcss-plugin-px2rem的 remUnit值設置為rootValue: 75,exclude:/(node_module)/,這個時候 你三方ui庫就不會自動轉換 rem了，大小就與頁面保持一致了
2.不固定縮放比，將 <meta name="viewport" 標簽注釋掉，將.postcssrc.js 的postcss-plugin-px2rem的 remUnit值設置為rootValue: 37.5,去掉exclude:/(node_module)/,這個時候 你三方ui庫轉換為rem后大小與頁面也會保持一致了
缺點：頁面的基准值是以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 ，配置如下：
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;}
/**
* 移動端自適應，移動端一定要在頭 <head>標簽里面加入這段標簽,以適應不同手機的視口
*/
// <!--content-->
// <!--width=device-width 可視區域的寬度，值可為數字或關鍵詞device-width-->
// <!--height=device-height 可視區域的高度，值可為數字或關鍵詞device-height-->
// <!--user-scalable=yes/no 是否可對頁面進行縮放，no 禁止縮放-->
// <!--initial-scale=1.0 頁面首次被顯示是可視區域的縮放級別，取值1.0則頁面按實際尺寸顯示，無任何縮放-->
// <!--minimum-scale=1.0 可視區域的縮小級別-->
// <!--maximum-scale=1.0 可視區域的放大級別-->