国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

【移動(dòng)適配】移動(dòng)Web怎么做屏幕適配（三）

LiuRhoRamen / 2635人閱讀

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


復(fù)雜紛擾的世界背后，總會(huì)有萬變不離其宗的簡(jiǎn)單規(guī)則

文 | 啃先生 Mar.08.2016

壹 | First

前面寫了兩篇移動(dòng)適配相關(guān)的文章：

《移動(dòng)Web怎么做屏幕適配（一）》重點(diǎn)介紹了怎樣利于rem來處理尺寸（width、height、margin、padding等等）相關(guān)的適配。

《一個(gè)像素的border怎么實(shí)現(xiàn)》通過介紹1個(gè)物理像素border的實(shí)現(xiàn)，引出viewport、物理像素、CSS像素的概念，以及它們之間的關(guān)系。

這是移動(dòng)適配相關(guān)的第三篇文章，介紹vw、vh，然后對(duì)三篇文章做一個(gè)總結(jié)。

貳 | Second

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

意思是

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

vh是高度。規(guī)律跟vw一樣。

vmin是vh和vw中較小者；vmax是vh和vw中較大者

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

div{ width = 1vw; }
 等同于 
div{ width:1%; }

也沒錯(cuò)，但是當(dāng)我們想實(shí)現(xiàn)類似九宮格圖片的時(shí)候，就能感受到它的魔性了。

例如要實(shí)現(xiàn)上面的圖片布局，即三張圖占滿一整屏，而每張圖都是正方形，用vw怎么實(shí)現(xiàn)？代碼如下：

如果使用%，純粹用CSS是無法實(shí)現(xiàn)的，除非JS計(jì)算動(dòng)態(tài)設(shè)置。
那么vw、vh的兼容性如何呢？看看下圖caniuse.com的查詢結(jié)果，移動(dòng)端安卓4.3自帶瀏覽器不支持。

soga，看起來很簡(jiǎn)單。那么問題來了，為什么之前的文章要費(fèi)那么大力氣寫rem？

叄 | Third

對(duì)三篇文章做一個(gè)總結(jié)
回顧上一期寫1個(gè)物理像素border的實(shí)現(xiàn)的時(shí)候，提到有兩種實(shí)現(xiàn)方法：

整個(gè)頁面縮放，viewport 設(shè)置 scale

單個(gè)元素縮放，transform scale

其中，對(duì)單個(gè)元素的邊框進(jìn)行縮放的方案無法實(shí)現(xiàn)圓角。而整個(gè)頁面縮放的方案跟CSS標(biāo)準(zhǔn)一樣實(shí)現(xiàn)。

vw(vh)和rem要解決的是尺寸相關(guān)的適配，對(duì)比vw(vh)跟rem的區(qū)別：

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

px轉(zhuǎn)rem的插件較為豐富

那么，安卓4.3及以下操作系統(tǒng)在國(guó)內(nèi)的市場(chǎng)份額是多少呢？友盟的統(tǒng)計(jì)結(jié)果是約31%，量較大。


所以較為穩(wěn)妥的方案還是rem。
所以當(dāng)拿到一個(gè)移動(dòng)端Web項(xiàng)目，我的決策思路如下：

肆 | Fourth

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

博客上主要發(fā)技術(shù)文章，而公眾號(hào)里除了技術(shù)文章，還會(huì)發(fā)一些深圳身邊的創(chuàng)業(yè)故事，前端入門，以及經(jīng)驗(yàn)方面的東西，歡迎關(guān)注。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/115109.html

相關(guān)文章

  • 【移動(dòng)適配】移動(dòng)Web怎么做屏幕適配（三）

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

    jonh_felix 評(píng)論0 收藏0

  • 【移動(dòng)適配】移動(dòng)Web怎么做屏幕適配（一）

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

    huangjinnan 評(píng)論0 收藏0

  • 從零搭建移動(dòng)H5開發(fā)項(xiàng)目實(shí)戰(zhàn)

    摘要：并且除了常用的端，還要考慮微信端，或者是端。所以我們要有一套機(jī)制，在端上走的代碼，在端或者微信端上走端對(duì)應(yīng)的代碼。對(duì)于一個(gè)從零開始的移動(dòng)端項(xiàng)目，我總結(jié)了以上這些移動(dòng)開發(fā)難點(diǎn)，希望之后的人能少踩點(diǎn)坑，站在我的肩膀上提高項(xiàng)目開發(fā)的效率和質(zhì)量。 從零搭建移動(dòng)H5開發(fā)項(xiàng)目實(shí)戰(zhàn) 前端H5的前世今身 在Pc的時(shí)代，前端技術(shù)無疑統(tǒng)治了大多數(shù)用戶的交互界面！而在移動(dòng)為王的今天，NA開發(fā)在早期占領(lǐng)了大多...

    terro 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<