移動端螢幕的適配

標籤：

因為對H5較感興趣，所以沒事的時候會看一些文章部落格。

廢話不多說，先引入問題，

關於移動端螢幕的適配你有沒有什麼想說的 ？
首先 我之前一直使用的就是這種Rem 縮放的方法去做的，content= “width= device-width”，initial-scale=1.0,可以實現針對不同螢幕實現縮放效果，並且不出現捲軸，

而在內容部分使用 Rem進行對等比縮放，我們知道Rem 是一個相對長度 單位，它的大小會根據HTML根項目設定的font-size的大小進行換算，

根項目（html）先設定一個font-size，一般情況下為了容易計算rem的值，會將根項目設定為62.5%，因為預設狀態下，瀏覽器的預設文字大小為16px，16*0.625=10px，這樣就有1rem=10px，用到數值就很容易計算。

今日 “啃先生 ”文章有提到另一種適配方法，vw,vh,見獵心起故留下了文章，文章中提到vw,vh的方法形似100%適配方法，

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

    《移動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項目，我的決策思路如下：

移動端螢幕的適配