更新——前兩天寫的這篇文章未曾想能獲得這番熱烈反響，首先感謝大家的支援與抬愛，菜雞表示誠惶誠恐。我也是剛入掘金不久，本意是想在這個有原則的前端社群寫點文章，把平時積累多總結。一來有助於督促自己，二是希望能給有需要的朋友給予幫助。希望大佬們能多多發表意見或者建議，一起成長，進步！望輕拍，感激(ಥ _ ಥ) 一篇真正看了就會用的vw、wh適配教程
從古老的的百分比佈局+px+媒體查詢到rem佈局，一直沒找到心儀的移動端適配方案。網上搜尋的教程質量也是參差不齊(要麼配置過於繁瑣，要麼一篇文章到處抄襲)，反正我看完了總有一種無從下手的無奈。所幸，經同事推薦找到一款完美的外掛。欣喜之餘，以作記錄。同時希望能給需要的朋友提供幫助。
移動端適配神器——postcss-px-to-viewport
這裡不多介紹vw、vh屬性，畢竟網上一搜一大把，本文章只有最純粹的乾貨。只需要通過包管理工具安裝postcss-px-to-viewport外掛後進行簡單配置就可以在頁面直接使用px單位，專案編譯後自動轉換為對應的vw或vh屬性
px轉vw、vh
1. 在Github搜尋 postcss-px-to-viewport
選擇星星最多的
英語渣表示看到有中文文件很是興奮
2. 安裝外掛
npm install postcss-px-to-viewport --save-dev
複製程式碼3. 配置引數
這裡以vue cli3.x版本做參考，在package.json中配置
以上，現在程式碼中使用px就能直接轉為對應的vw、vh屬性了
通過媒體查詢處理邊界情況
一般來說使用px轉為vw、vh就可以應付99%的移動端適配了，但偶爾會有個別情況需要使用媒體查詢適配小屏解析度
比如以iphone6為基準佈局，看起來毫無問題
但在如iphone5等320畫素的解析度下就會有些瑕疵
明顯看到，字型重疊了。這時就可以請出法寶。用媒體查詢解決
程式碼意思是，當使用者手機解析度(寬度)為320畫素到340畫素之間的時候做相容處理，下面來看下處理後的效果
完美解決
解決元件庫衝突
當我們在專案中同時引入了postcss-px-to-viewport外掛及第三方元件庫時會出現樣式衝突。既第三方元件庫的px單位也被轉為了vh，會嚴重影響元件庫的美觀，這是我們不想看到的情況。
下面是有贊元件庫的彈窗元件，可以看到元件的px被誤轉為了vh，彈窗變得又醜又怪。
表面穩如虎，內心慌得一比。趕緊上官方文件看看有木有解決辦法(遇到問題首先看文件！看官方文件！)
直覺告訴我“selectorBlackList”可以解決問題， 趕緊在屬性裡面寫上"van"，試試能否過濾匹配
儲存並回到頁面檢視效果
完美解決！
備註
一般元件庫的class命名都會帶上自己獨有的字首，所以我們藉助此字首名來進行過濾
總結
至於vw、vh屬性的相容性，從https://caniuse.com/網站給出的資料來看，pc端也許有點差強人意，但手機上基本可以放心使用了。(順帶吐槽一下瀏覽器相容性真是阻礙技術發展的礙腳石)
