成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

Mike617 / 2045人閱讀

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

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

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

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

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

@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è)的響應(yīng)能力是乎沒有任何問(wèn)題的。

那么問(wèn)題來(lái)了

在移動(dòng)端瀏覽頁(yè)面時(shí)就出現(xiàn)異常了。


（沒有進(jìn)行Viewport控制的iPhone6上的顯示效果）

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

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

CSS像素：這個(gè)是我們?cè)贑SS使用過(guò)程中的一個(gè)抽象的單位，它并沒有一個(gè)絕對(duì)的尺寸，頁(yè)面上單個(gè)CSS像素的大小完全取決于Viewport的大??；

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

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

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

通過(guò)meta標(biāo)簽來(lái)控制Viewport

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

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

width

height

initial-scale

minimum-scale

maximum-scale

user-scalable

WIDTH

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

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


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

INITIAL-SCALE

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

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

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


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

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


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

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

這幾個(gè)參數(shù)用來(lái)控制頁(yè)面的縮放能力。

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

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

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

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

用CSS來(lái)控制Viewport

雖然現(xiàn)在很多人都在用viewport，但其實(shí)viewport并不是HTML5標(biāo)準(zhǔn)中的正式成員。W3C目前正在研究將viewport以@viewport規(guī)則的形式加入到CSS當(dāng)中，@viewport規(guī)則與viewport標(biāo)簽有異曲同工之妙，只是將用于布局的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標(biāo)簽吧，如果有興趣的話可以嘗試一下測(cè)試版的@viewport。

總結(jié)

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/49587.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

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

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

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

0條評(píng)論

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