移動端vue适配解決方案,（相容vant）

移動端vue 的項目适配一直是個問題,這裡記錄下實作

demo 請狠狠的戳這裡    ​​https://download.lllomh.com/cliect/#/product/F421745961449998​​

推薦用 postcss-px-to-viewport 插件去處理,轉換成vw 機關​

​<code>​postcss-px-to-viewport​</code>​是一款非常好用的插件，

它将px轉換成視口機關vw，大家都知道，vw本質上還是一種百分比機關，100vw即等于100%，即​<code>​window.innerWidth 擷取​</code>​

&lt;meta name="viewport" content="width=device-width,initial-scale=1.0"&gt; 用預設即可,可以不用設定修改

本案例是在cli3中實施的,其他的照舊應該也一樣

1.我們先把它安裝到項目的開發環境：

 2.在項目根目錄下建立​<code>​.postcssrc.js​</code>​檔案

3.添加下面配置：

4.重新運作項目，配置檔案生效

5.寫一段測試代碼來驗證一下：

6.打開控制台，可以看到已經進行了轉換

當我們引入一些第三方庫的時候，比如​<code>​vant​</code>​​，上面配置的​<code>​exclude​</code>​去掉，表示全部内容進行vw轉換，會遇到這樣的問題：

像這個TabBar，變得非常的小，被壓扁了。

其實vant官網也是給出了關于viewport的适配方案，在github找一個名為vant-demo的項目，可以看到其配置如下：

vant團隊的是根據375px的設計稿去做的，理想視口寬度為375px。

那麼，我們是否也要叫UI重新出一版375px的設計稿？

或者，我們在書寫的過程心算一下，所有标注的尺寸都除以2？

讓我們回到webpack本身，重新看一下這份​<code>​.postcssrc.js​</code>​檔案，它除了暴露一個對象，也可以暴露一個函數，無論暴露什麼，在webpack運作時，都會被我們配置的海量檔案讀取并執行。

暴露函數有一個好處，可以拿到webpack運作的目前執行檔案的資訊。

那麼我們可以有這樣一個思路：如果讀取的是vant相關的檔案，​<code>​viewportWidth​</code>​​就設為375，如果是其他的檔案，我們就按照我們UI的寬度來設定​<code>​viewportWidth​</code>​，即750。

改寫​<code>​.postcssrc.js​</code>​檔案配置如下：

重新運作後發現，不僅vant相關元件的機關被轉換成了vw，而且其比例也是完全正确的了。

以上部分屬于網際網路收集實際整合