一種開箱即賊好用的移動端適配方案
阿新 • • 發佈:2020-04-12
主角是誰
- 在今天這篇文章中,我並不會在這裡講一些移動端視口的概念,包括物理畫素和邏輯畫素,理想視口,dpr等等等等,我只介紹這樣一種非常不錯的移動端適配方案:
post-css-to-viewport
,如果我說這種方案能解決98%以上的移動端佈局痛點,我想整個部落格園,應該沒有人會反駁。
痛點在哪裡
在之前有一種流行已久的移動端適配方案,那就是rem
,我想下面這兩句程式碼,有不少老移動端都不會陌生:
const deviceWidth = document.documentElement.clientWidth || document.body.clientWidth;
document.querySelector('html').style.fontSize = deviceWidth / 7.5 + 'px';
- 沒錯,在那個移動端UI稿尺寸為
750*1334
滿天飛的時代,這兩句程式碼確實給開發者帶來了很大的方便,這樣設定根font-size後,px和rem的轉換比例成了100, 為比如UI稿一個長寬分別為120px*40px
,那麼開發者對應的寫成1.2rem*0.4rem
就可以了 - 這種換算已經是頗為方便,但是並非所有的專案都能這樣去設定一個方便換算的比例係數,當比例係數為100時,小數點往前面挪兩位就行了,然而有的專案設定的換算係數千奇百怪,有50的,有16的,很多已經嚴重超出口算力所能及的範疇了。所以後來誕生的
px-to-rem
或者px2rem
就是為了解決這個問題 - 當然,這仍沒有給css帶來多少簡潔的清流,因為人們有時候不需要去轉換一些單位,比如字型大小
font-size
人們希望有這樣一種方案...
- 首先,無論換算方不方便,我都不想換算(就是這麼懶