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

更新——前兩天寫的這篇文章不曾想能得到這番熱烈反響,首先感謝你們的支持與擡愛,菜雞表示坐臥不安。我也是剛入掘金不久,本意是想在這個有原則的前端社區寫點文章,把平時積累多總結。一來有助於督促本身,二是但願能給有須要的朋友給予幫助。但願大佬們能多多發表意見或者建議,一塊兒成長,進步!望輕拍,感激(ಥ _ ಥ) 一篇真正看了就會用的vw、wh適配教程css

從古老的的百分比佈局+px+媒體查詢到rem佈局,一直沒找到心儀的移動端適配方案。網上搜索的教程質量也是良莠不齊(要麼配置過於繁瑣,要麼一篇文章處處抄襲),反正我看完了總有一種無從下手的無奈。所幸,經同事推薦找到一款完美的插件。欣喜之餘,以做記錄。同時但願能給須要的朋友提供幫助。前端

移動端適配神器——postcss-px-to-viewport

這裏很少介紹vw、vh屬性,畢竟網上一搜一大把,本文章只有最純粹的乾貨。只須要經過包管理工具安裝postcss-px-to-viewport插件後進行簡單配置就能夠在頁面直接使用px單位,項目編譯後自動轉換爲對應的vw或vh屬性vue

px轉vw、vh

1. 在Github搜索 postcss-px-to-viewport

選擇星星最多的 npm

英語渣表示看到有中文文檔非常興奮 json

2. 安裝插件

npm install postcss-px-to-viewport --save-dev
複製代碼

3. 配置參數

這裏以vue cli3.x版本作參考,在package.json中配置 瀏覽器

以上,如今代碼中使用px就能直接轉爲對應的vw、vh屬性了bash

經過媒體查詢處理邊界狀況

通常來講使用px轉爲vw、vh就能夠應付99%的移動端適配了,但偶爾會有個別狀況須要使用媒體查詢適配小屏分辨率iphone

好比以iphone6爲基準佈局,看起來毫無問題 工具

但在如iphone5等320像素的分辨率下就會有些瑕疵 佈局

明顯看到,字體重疊了。這時就能夠請出法寶。用媒體查詢解決

代碼意思是,當用戶手機分辨率(寬度)爲320像素到340像素之間的時候作兼容處理,下面來看下處理後的效果

完美解決

解決組件庫衝突

當咱們在項目中同時引入了postcss-px-to-viewport插件及第三方組件庫時會出現樣式衝突。既第三方組件庫的px單位也被轉爲了vh,會嚴重影響組件庫的美觀,這是咱們不想看到的狀況。

下面是有贊組件庫的彈窗組件,能夠看到組件的px被誤轉爲了vh,彈窗變得又醜又怪。

表面穩如虎,心裏慌得一比。趕忙上官方文檔看看有木有解決辦法(遇到問題首先看文檔!看官方文檔!)

直覺告訴我「selectorBlackList」能夠解決問題, 趕忙在屬性裏面寫上"van",試試可否過濾匹配

保存並回到頁面查看效果

完美解決!

備註

通常組件庫的class命名都會帶上本身獨有的前綴,因此咱們藉助此前綴名來進行過濾

總結

至於vw、vh屬性的兼容性,從https://caniuse.com/網站給出的數據來看,pc端也許有點差強人意,但手機上基本能夠放心使用了。(順帶吐槽一下瀏覽器兼容性真是阻礙技術發展的礙腳石)

相關文章
相關標籤/搜索