【移動適配】移動Web怎麼作屏幕適配（三）

複雜紛擾的世界背後，總會有萬變不離其宗的簡單規則

啃先生 Mar.8th.2016

壹 | Fisrt

前面寫了兩篇移動適配相關的文章：

• 《移動Web怎麼作屏幕適配（一）》重點介紹了怎樣利於rem來處理尺寸（width、height、margin、padding等等）相關的適配。

• 《一個像素的border怎麼實現》經過介紹1個物理像素border的實現，引出viewport、物理像素、CSS像素的概念，以及它們之間的關係。

這是移動適配相關的第三篇文章，介紹vw、vh，而後對三篇文章作一個總結。

屏幕適配是一個很容易被忽略的問題，但對於精益求精的產品而言，是必不可少的。對於Web開發的求職者而言，也是一個必須要理解清楚的經典問題

 

貳 | Second 

其實，尺寸（width、height、margin、padding等等）相關的適配，除了使用rem之外，還可使用CSS3的vh和vw。

Length units representing 1% of the viewport size for viewport width (vw), height (vh), the smaller of the two (vmin), or the larger of the two (vmax).

意思是

• vw表明viewport寬度的1%，即viewport寬度被劃分爲100份，1vw表明1份的寬度。

• vh是高度。規律跟vw同樣。

• wmin是vh和vw中較小者；vmax是vh和vw中較大者

咋一看，不就是CSS中的百分比嘛？

 

div{ width = 1vw; }

 等同於 

div{ width:1%; } 

 也沒錯，可是當咱們想實現相似九宮格圖片的時候，就能感覺到它的魔性了。

例如要實現上面的圖片佈局，即三張圖佔滿一整屏，而每張圖都是正方形，用vw怎麼實現？代碼以下：

若是使用%，純粹用CSS是沒法實現的，除非JS計算動態設置。

那麼vw、vh的兼容性如何呢？看看下圖caniuse.com的查詢結果，移動端安卓4.3自帶瀏覽器不支持。

soga，看起來很簡單。那麼問題來了，爲何以前的文章要費那麼大力氣寫rem？

 

叄 | Third 

看到這裏，能夠休息一小段了，如今對三篇文章作一個總結

回顧上一期寫1個物理像素border的實現的時候，提到有兩種實現方法：

• 整個頁面縮放，viewport 設置 scale

• 單個元素縮放，transform scale

其中，對單個元素的邊框進行縮放的方案沒法實現圓角。而整個頁面縮放的方案跟CSS標準同樣實現。

 

vw(vh)和rem要解決的是尺寸相關的適配，對比vw(vh)跟rem的區別：
1. 兼容性，vw不兼容安卓4.3及如下自帶瀏覽器

2. px轉rem的插件較爲豐富

那麼，安卓4.3及如下操做系統在國內的市場份額是多少呢？友盟的統計結果是約31%，量較大。

所以較爲穩妥的方案仍是rem。

因此當拿到一個移動端Web項目，個人決策思路以下：

 

 

肆 | The End

關於移動適配的專題還有不少，例如設計師輸出多少分辨率的素材，才能即節省流量，又兼顧清晰度？

無論什麼專題，前提是理解viewport，CSS像素和物理像素的概念以及它們之間的關係。因此到目前爲止我所整理出來的三篇文章，是移動適配知識中很是重要的基礎知識。

所以歡迎查看前兩篇文章，寫得不對的地方歡迎拍磚。

 

博客上主要發技術文章，而公衆號裏除了技術文章，還會發一些深圳身邊的創業故事，前端入門，以及經驗方面的東西，歡迎關注。