【移動適配】移動Web怎么做屏幕適配（三）

jonh_felix 發布于2019-08-19 17:47 / 1887人閱讀

摘要：復雜紛擾的世界背后，總會有萬變不離其宗的簡單規則文啃先生壹前面寫了兩篇移動適配相關的文章移動怎么做屏幕適配一重點介紹了怎樣利于來處理尺寸等等相關的適配。所以到目前為止我所整理出來的三篇文章，是移動適配知識中非常重要的基礎知識。

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

文 | 啃先生 Mar.08.2016

壹 | First

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

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

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

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

貳 | Second

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

意思是

vw代表viewport寬度的1%，即viewport寬度被劃分為100份，1vw代表1份的寬度。

vh是高度。規律跟vw一樣。

vmin是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的區別：

兼容性，vw不兼容安卓4.3及以下自帶瀏覽器

px轉rem的插件較為豐富

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

所以較為穩妥的方案還是rem。
所以當拿到一個移動端Web項目，我的決策思路如下：

肆 | Fourth

關于移動適配的專題還有很多，例如設計師輸出多少分辨率的素材，才能即節省流量，又兼顧清晰度？
不管什么專題，前提是理解viewport，CSS像素和物理像素的概念以及它們之間的關系。所以到目前為止我所整理出來的三篇文章，是移動適配知識中非常重要的基礎知識。
因此歡迎查看前兩篇文章，寫得不對的地方歡迎拍磚。

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

云服務器 GPU云服務器移動適配移動端適配 cdn適配移動關于適配移動端的

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78824.html

【移動適配】移動Web怎么做屏幕適配（三）

摘要：復雜紛擾的世界背后，總會有萬變不離其宗的簡單規則文啃先生壹前面寫了兩篇移動適配相關的文章移動怎么做屏幕適配一重點介紹了怎樣利于來處理尺寸等等相關的適配。所以到目前為止我所整理出來的三篇文章，是移動適配知識中非常重要的基礎知識。 showImg(https://segmentfault.com/img/bVti5j);復雜紛擾的世界背后，總會有萬變不離其宗的簡單規則文 | 啃先生 Ma...

LiuRhoRamen 2019-08-30 12:50 評論0 收藏0
【移動適配】移動Web怎么做屏幕適配（一）

摘要：屏幕適配是一個很容易被忽略的問題，但對于精益求精的產品而言，是必不可少的。對于開發的求職者而言，也是一個必需要理解清楚的經典問題文啃先生壹移動端適配的是什么我們討論的是網頁適配多種尺寸屏幕，讓網頁效果看起來和設計師的設計稿一樣。屏幕適配是一個很容易被忽略的問題，但對于精益求精的產品而言，是必不可少的。對于Web開發的求職者而言，也是一個必需要理解清楚的經典問題文 | 啃先生 Mar...

huangjinnan 2019-08-19 17:43 評論0 收藏0
從零搭建移動H5開發項目實戰

摘要：并且除了常用的端，還要考慮微信端，或者是端。所以我們要有一套機制，在端上走的代碼，在端或者微信端上走端對應的代碼。對于一個從零開始的移動端項目，我總結了以上這些移動開發難點，希望之后的人能少踩點坑，站在我的肩膀上提高項目開發的效率和質量。從零搭建移動H5開發項目實戰前端H5的前世今身在Pc的時代，前端技術無疑統治了大多數用戶的交互界面！而在移動為王的今天，NA開發在早期占領了大多...

terro 2019-08-29 11:32 評論0 收藏0