最簡單的移動端適配方案(rem+vw)

rem 這個單位對於前端來說並不陌生了,在移動端適配方面,我們經常會用到它,通常我們會採用類似淘寶flexible.js 的方案, 寫px,然後通過外掛轉化成rem,然後得出一堆小數值的rem單位.淘寶這個方案已經用了很多年,相容性很好,然而現在已經2018年了,許多相容性問題現在不再那麼頭疼了,因此我們現在有了更好的適配方案.

在很早以前,vw 這個單位就已經被列入w3c規範了,如果基本都支援了,vw 表示螢幕的1%,可能有人會問到那跟百分比有什麼區別呢? 通常,很多情況確實可以被百分比替代,但是要知道百分比如果要子n代元素都生效,那得所有父級元素都得相對html,body 100%寬才能有作用,而vw則永遠相對螢幕1%.說了vw的含義來說說怎麼結合rem適配吧.
這裡直接給出結果,只需一行程式碼即可

html{font-size:13.33333333vw}
複製程式碼

然後我們即可根據設計稿(前提設計稿是750px的),這樣我們寫1rem即為設計稿上的100px

效果如上圖所示,注意:應設定meta為移動端

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
複製程式碼

, 是不感覺很詫異,寫的width:1rem,heigth:1rem的div 就是50px

50px (iphone6為2倍屏,即對應750px設計稿上的100px

100px) 怎麼搞定的,1句程式碼就能實現,太神奇.不信可以看看上圖或者自己試一下.恩,就是這麼簡單,1句css程式碼就搞定,無需任何的js程式碼.
下面分析下原理吧, 上面我們說了vw表示1%的螢幕寬度,而我們的設計稿通常是750px的,螢幕一共是100vw,對應750px,那麼1px就是0.1333333vw, 為了方便計算,我們放大100倍,同時我們知道另一個單位rem,rem是相對html元素,為了方便計算,我們取html是100px,通過上面的計算結果1px是0.13333333vw,那麼100px就是13.333333vw了.這樣後面的用rem就很好計算了,這樣就得到13.3333333vw對應100px(750px的設計稿),然後我們就可以很愉快的寫rem單位了, 由於倍率是100,我們也不需要啥計算外掛之類的了,除以100,直接小數點向左移動2位,1rem是100px,那麼10px就是0.1rem,1px就是0.01rem,小學生都會算了, 不需要用postcss-px-to-viewport這種工具轉成一堆小數位特長的rem單位了,而且這個很方便,直接寫rem,並不需要轉換,用了轉換工具如果想寫px的地方還得設定白名單或者黑名單,這個就不存在這種問題了, 想用相對的就rem,想絕對的就直接寫px即可,並不需要其他的各種設定.是不是很簡單?
改進版:經過一些實踐,發現此方案只能相容手機,甚至連ipad相容都不好,當然,此處的相容不是相容問題,是效果問題,只要相容vw的裝置都能用這個方案,但是由於適配的根本是vw這個, 這個會隨著裝置的寬度越來越大,那麼用rem做單位的元素也會越來越大,以至於如果這個在pc上,那麼沒法預覽了,效果會很差,字太大了.這樣我們可以設定一下當螢幕過大的時候的情況,我們可以加一句程式碼

@media (min-width: 560px) {
     html {
       font-size: 54px;
     }
   }
複製程式碼

加上這句程式碼,在pc上效果也很不錯了, 哈哈,如果問為什麼是pc端字型是54px以及為什麼是560px為分界線, 好吧,我也不知道,這個是我自己安裝flexible.js模擬出來的,flexible.js 在560px以上螢幕就是html{font-size:54px}
雖然改進版不再如上面說的一句程式碼解決,不過也算是兩句程式碼解決了.還是非常簡單的哦,不需要任何的轉化工具.

最簡單的移動端適配方案(rem+vw)

相關文章