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

資訊專欄INFORMATION COLUMN

如何做好移動端的響應(yīng)式設(shè)計：Viewport控制

DevWiki / 2066人閱讀

摘要：當(dāng)我們想根據(jù)屏幕尺寸來自動變化頁面布局時，我們會像這樣做在瀏覽器上調(diào)整窗口大小，可以看到網(wǎng)頁的響應(yīng)能力是乎沒有任何問題的。在正式發(fā)布之前，還是先繼續(xù)使用標簽吧，如果有興趣的話可以嘗試一下測試版的。

  
新人翻譯，歡迎轉(zhuǎn)載~

  英文原文地址：http://bitsofco.de/2015/respove-design-viewport/

  原文例程地址：https://github.com/ireade/viewports
（可下載例程參照閱讀）

當(dāng)我們在做響應(yīng)式設(shè)計時，關(guān)注最多的是CSS的@media查詢。不可否認，@media查詢完成了很多工作，但一個網(wǎng)站的響應(yīng)能力還是取決于對Viewport的控制。當(dāng)我們想根據(jù)屏幕尺寸來自動變化頁面布局時，我們會像這樣做：

@media screen and (min-width: 960px) {
  body { background-color: green; }
}

@media screen and (max-width: 960px) and (min-width: 500px) {
  body { background-color: pink; }
}

@media screen and (max-width: 500px) {
  body { background-color: yellow; }
}

在瀏覽器上調(diào)整窗口大小，可以看到網(wǎng)頁的響應(yīng)能力是乎沒有任何問題的。

那么問題來了

在移動端瀏覽頁面時就出現(xiàn)異常了。


（沒有進行Viewport控制的iPhone6上的顯示效果）

頁面雖然可以看到，但不能自適應(yīng)手機的屏幕。之所以會有這樣的問題，是設(shè)備尺寸和Viewport尺寸不一致導(dǎo)致的。為了更好的理解這兩個尺寸之間的不同點，下面就簡單說說：

設(shè)備像素：這個是物理層面的像素數(shù)量，比如一臺iPhone6，是375x667像素。（注：這里所說的設(shè)備像素有兩種類型，硬件像素和設(shè)備獨立像素，不過這個區(qū)別與此文無關(guān)）；

CSS像素：這個是我們在CSS使用過程中的一個抽象的單位，它并沒有一個絕對的尺寸，頁面上單個CSS像素的大小完全取決于Viewport的大小；

Viewport：Viewport決定了頁面的像素密度。比如一個寬750px的Viewport，表示屏幕上橫向排布了750個CSS像素（Viewport在未縮放的情況下）。

  
Viewport是"無關(guān)設(shè)備"的，它不知道也不關(guān)心我們的設(shè)備到底有多大的屏幕。

大多數(shù)顯示器的Viewport尺寸默認在800px到1024px之間，這就解釋了為什么之前我們的例程可以在電腦上正常顯示而不用管當(dāng)前屏幕的尺寸。

通過meta標簽來控制Viewport

可以設(shè)置meta標簽中的viewport信息，以解決Viewport尺寸不匹配的問題。meta標簽的用法如下：

標簽內(nèi)容中有6個關(guān)鍵字：

width

height

initial-scale

minimum-scale

maximum-scale

user-scalable

WIDTH

可以用width來設(shè)置viewport的寬度，以替代那些不合適的默認寬度。我們可以給其設(shè)定一個固定大小，但設(shè)定成device-width更加明智一些，這樣我們可以兼容不同大小的屏幕。

加了這句話之后，我們的例程看起來就正常多了。


（在iPhone6上設(shè)置width=device-width之后的顯示效果）

INITIAL-SCALE

在移動設(shè)備上，用戶有時會需要縮放頁面，當(dāng)頁面縮放時，Viewport的像素尺寸也會相應(yīng)的改變，但CSS尺寸不會變。

  
比如，在一個400px寬的Viewport中有一個元素，設(shè)定width: 100px;，這時該元素就橫跨了1/4的屏幕。如果用戶把頁面放大到兩倍大小，這時Viewport寬度變成了200px，但元素仍然寬100個CSS像素。這時這個元素就占了半個屏幕了。

我們可以通過initial-scale來設(shè)置CSS像素和Viewport像素之間的比例，通常情況下是1:1。這個參數(shù)的設(shè)置可以很好的解決width=device-width設(shè)置所帶來的問題。有些移動設(shè)備瀏覽器會在縱向模式時默認使用設(shè)備寬度，當(dāng)切換到橫向模式時頁面顯示就會不正常。


（在沒有設(shè)置initial-scale的橫向iPhone6上的顯示效果）

如圖所示，當(dāng)iPhone處于橫向模式時，我們看到的還是寬度小余500px時的頁面狀態(tài)。不過不要慌張，我們可以通過設(shè)置initial-scale為1來解決這個問題。


（在設(shè)置了initial-scale的橫向iPhone6上的顯示效果）

USER-SCALABLE，MAXIMUM-SCALE以及MINIMUM-SCALE

這幾個參數(shù)用來控制頁面的縮放能力。

Maximum-scale：這個是用戶可以縮放頁面的最大比例。比如說設(shè)置為1，用戶就無法縮放頁面。假如設(shè)置為2，用戶就可以把頁面放大到1個CSS像素等于2個Viewport像素的大小；

Minimum-scale：這個是用戶可以縮放頁面的最小比例。假如設(shè)置為2，頁面的最小比例就是原比例的兩倍，并且無法縮小到原始比例；

User-scalable：如果設(shè)置了user-scalable=no，用戶將無法對頁面進行縮放。

由于這幾個參數(shù)限制了用戶對頁面的操作，通常不建議使用它們。

用CSS來控制Viewport

雖然現(xiàn)在很多人都在用viewport，但其實viewport并不是HTML5標準中的正式成員。W3C目前正在研究將viewport以@viewport規(guī)則的形式加入到CSS當(dāng)中，@viewport規(guī)則與viewport標簽有異曲同工之妙，只是將用于布局的viewport歸還給CSS，現(xiàn)在已經(jīng)有部分開發(fā)者在嘗試@viewport了。

@viewport {
  zoom: 1.0; /* same as initial-scale=1 */
  width: device-width;
}

/* Vendor specific prefixes */
@-ms-viewport 
@-webkit-viewport 
@-moz-viewport 
@-o-viewport

在@viewport正式發(fā)布之前，還是先繼續(xù)使用viewport標簽吧，如果有興趣的話可以嘗試一下測試版的@viewport。

總結(jié)

為了保證你的響應(yīng)式頁面能夠在移動端正常運行，把下面這句話加到你的元素里面吧~

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/111059.html

相關(guān)文章

  • 如何做好移動端的響應(yīng)式設(shè)計：Viewport控制

    摘要：當(dāng)我們想根據(jù)屏幕尺寸來自動變化頁面布局時，我們會像這樣做在瀏覽器上調(diào)整窗口大小，可以看到網(wǎng)頁的響應(yīng)能力是乎沒有任何問題的。在正式發(fā)布之前，還是先繼續(xù)使用標簽吧，如果有興趣的話可以嘗試一下測試版的。 新人翻譯，歡迎轉(zhuǎn)載~ 英文原文地址：http://bitsofco.de/2015/respove-design-viewport/ 原文例程地址：https://github...

    Mike617 評論0 收藏0

  • 談?wù)?em>響應(yīng)式布局

    摘要：今天在這里就略微談一下響應(yīng)式布局吧想必大家都知道響應(yīng)式布局已經(jīng)在這個移動端為主流的時代成為了避不開的話題之一接下來我們從小到大來談?wù)勴憫?yīng)式網(wǎng)頁設(shè)計的基本原則為什么為什么需要響應(yīng)式設(shè)計想必這點不說大家都能想到答案現(xiàn)在是一個移動為先的時代我們要 今天在這里就略微談一下響應(yīng)式布局吧,想必大家都知道響應(yīng)式布局已經(jīng)在這個移動端為主流的時代成為了避不開的話題之一,接下來我們從小到大來談?wù)勴憫?yīng)式網(wǎng)頁...

    smallStone 評論0 收藏0

  • 關(guān)于CSS中的字體尺寸設(shè)置

    摘要：常用單位在中可以用很多不同的方式來設(shè)定字體的尺寸。當(dāng)你為一個元素添加單位時，應(yīng)當(dāng)考慮到所有父元素的字體尺寸。例寬度是中新提出的一個單位，通過寬度來計算字體尺寸。 個人翻譯，轉(zhuǎn)載請注明出處 英文原文：CSS Font Sizing 寫在前面 上一篇文章如何做好移動端的響應(yīng)式設(shè)計：Viewport控制討論到了CSS像素，于是我決定研究一下如何用不同的方式來在CSS中設(shè)定字體...

    mcterry 評論0 收藏0

  • 移動web開發(fā)淺談之那些我們需要知道的基礎(chǔ)

    摘要：正文概念本次要談的移動不是，只是很普通的移動端的界面。默認行為作為之前開發(fā)端的人員，第一反應(yīng)就是如何把那么大的界面內(nèi)容展現(xiàn)到手機小小的屏幕上。就是在顯示多行文字的時候，可能需要在自己期望顯示多少行之后，省略后面的文字，然后以。。。 前言 開發(fā)生涯總是豐富多采，工作多年，不同領(lǐng)域還是逃不過雨露均沾，之前開發(fā)過android，微信，ios，web網(wǎng)站也玩過。但是對于移動web這一塊，確實沒...

    stackfing 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<