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文件

 

@media (max-width: 600px) { .mainner { display: none; } }