【移動端適配】用vw、vh＋媒體查詢打造最完美的移動端適配方案

更新——前兩天寫的這篇文章不曾想能得到這番熱烈反響，首先感謝你們的支持與擡愛，菜雞表示坐臥不安。我也是剛入掘金不久，本意是想在這個有原則的前端社區寫點文章，把平時積累多總結。一來有助於督促本身，二是但願能給有須要的朋友給予幫助。但願大佬們能多多發表意見或者建議，一塊兒成長，進步！望輕拍，感激(ಥ _ ಥ) 一篇真正看了就會用的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端也許有點差強人意，但手機上基本能夠放心使用了。(順帶吐槽一下瀏覽器兼容性真是阻礙技術發展的礙腳石)