vue+vant-ui移動端適配 寬高
一：在vue中安裝vant
1.npm i vant -S
2.npm i babel-plugin-import -D
// 在.babelrc 中新增配置
{
"plugins": [
["import", {
"libraryName": "vant",
"libraryDirectory": "es",
"style": true }]
]
}
3.main.js中引入 import'vant/lib/index.css'; Vue.use(Vant); 這樣就可以全域性使用啦！其次再說說寬高問題！這裡總結了幾種方法，希望對寧有用！
我在寫專案的時候看了很多部落格，都以為是 16px=1rem ，所以大意了，我拿所有量的px除以16，後來寫著寫著就不對勁了，大家千萬別步入我的後路，在這普及一下，什麼是rem！
rem是指相對於根元素的字型大小的單位。簡單的說它就是一個相對單位。
em是指相對於父元素的字型大小的單位。
沒錯第一種方法就是用rem，當然不是除以rem，而是通過淘寶已經封裝好的方法，呼叫設定！
二：rem適配下載
1.npm i lib-flexible --save-dev
main.js引入適配： import 'lib-flexible/flexible'
如何使用：參考https://blog.csdn.net/bbsyi/article/details/80666756
2.安裝postcss-pxtorem是一款 postcss 外掛，用於將單位轉化為 rem
"postcss-pxtorem":{
rootValue:75,//設計稿為750
propList:['*'],
selectorBlackList:['van']//排除van
}
3.CSS的@media，媒體查詢例如：
@media="screen and (min-width: 600px) and (max-device-width: 980px)" href="css600-980.css"
這段程式碼的意思是：如果螢幕寬度小於600畫素（max-device-width: 600px），就載入css600.css檔案。
如果螢幕寬度在600畫素到980畫素之間，則載入css600-980.css檔案