這里的這個 【npm install px2rem-loader --save-dev】記錄一下痒谴，是我在別的博主那里看到的，以后查查看看到底有什么用绳锅，這篇博文中沒用到這個
vue-cli3實現(xiàn)移動端自適應(yīng)
原文鏈接：https://blog.csdn.net/weixin_43915587/article/details/92839565
原創(chuàng)leo_neverGivpUp 發(fā)布于2019-06-19 17:44:58 閱讀數(shù) 1699 收藏
展開
1捶索、安裝 flexible和 postcss-px2rem（命令行安裝）
npm install lib-flexible --save-dev
npm i postcss-px2rem --save
flexible會為頁面根據(jù)屏幕自動添加標簽因妇，動態(tài)控制initial-scale欲逃，maximum-scale找蜜，minimum-scale等屬性的值。
例如在Galaxy S III:
例如在iphone6/7/8:
postcss-px2rem會將px轉(zhuǎn)換為rem稳析，rem單位用于適配不同寬度的屏幕洗做，根據(jù)標簽的font-size值來計算出結(jié)果，1rem=html標簽的font-size值彰居。
2, 引入lib-flexible
在項目入口文件main.js 中引入lib-flexible
import 'lib-flexible'
注意事項（important）: 由于flexible會動態(tài)給頁面header中添加標簽诚纸，所以務(wù)必請把目錄 public/index.html 中的這個標簽刪除！Ｔ２ぁ！（上面提到的那個<meta name='viewport'>）
3, 配置postcss-px2rem
vue-cli3 構(gòu)建的項目相較于vue-cli2 構(gòu)建的項目精簡了許多闭专，將一些默認配置進行了更好更嚴密奴潘，讓開發(fā)變得更高效的封裝。具體請看vue-cli官網(wǎng) https://cli.vuejs.org/zh/guide/
px2rem的配置放在vue-cli3 項目中vue.config.js中（找不到影钉？可能你是一個新構(gòu)建的項目画髓，需要手動在項目根目錄創(chuàng)建vue.config.js）
module.exports = {
css: {
loaderOptions: {
css: {},
postcss: {
plugins: [
require('postcss-px2rem')({
remUnit: 37.5
})
]
}
}
},
}
PS：remUnit這個配置項的數(shù)值是多少呢？平委？奈虾？ 通常我們是根據(jù)設(shè)計圖來定這個值，原因很簡單廉赔，便于開發(fā)肉微。假如設(shè)計圖給的寬度是750，我們通常就會把remUnit設(shè)置為75蜡塌，這樣我們寫樣式時碉纳，可以直接按照設(shè)計圖標注的寬高來1:1還原開發(fā)。
那為什么在這里寫成了37.5呢馏艾？劳曹？？
之所以設(shè)為37.5琅摩，是為了引用像mint-ui這樣的第三方UI框架铁孵，因為第三方框架沒有兼容px2rem ，將remUnit的值設(shè)置為設(shè)計圖寬度（這里為750px）75的一半房资，即可以1:1還原mint-ui的組件蜕劝，否則會樣式會有變化，例如按鈕會變小。
既然設(shè)置成了37.5 那么我們必須在寫樣式時熙宇，也將值改為設(shè)計圖的一半鳖擒。
————————————————
版權(quán)聲明：本文為CSDN博主「leo_neverGivpUp」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議烫止，轉(zhuǎn)載請附上原文出處鏈接及本聲明蒋荚。
原文鏈接：https://blog.csdn.net/weixin_43915587/article/details/92839565
