摘要:當我們想根據屏幕尺寸來自動變化頁面布局時,我們會像這樣做在瀏覽器上調整窗口大小,可以看到網頁的響應能力是乎沒有任何問題的。在正式發布之前,還是先繼續使用標簽吧,如果有興趣的話可以嘗試一下測試版的。
</>復制代碼
新人翻譯,歡迎轉載~
英文原文地址:http://bitsofco.de/2015/respove-design-viewport/
原文例程地址:https://github.com/ireade/viewports
(可下載例程參照閱讀)
當我們在做響應式設計時,關注最多的是CSS的@media查詢。不可否認,@media查詢完成了很多工作,但一個網站的響應能力還是取決于對Viewport的控制。當我們想根據屏幕尺寸來自動變化頁面布局時,我們會像這樣做:
</>復制代碼
@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; }
}
在瀏覽器上調整窗口大小,可以看到網頁的響應能力是乎沒有任何問題的。
那么問題來了在移動端瀏覽頁面時就出現異常了。
(沒有進行Viewport控制的iPhone6上的顯示效果)
頁面雖然可以看到,但不能自適應手機的屏幕。之所以會有這樣的問題,是設備尺寸和Viewport尺寸不一致導致的。為了更好的理解這兩個尺寸之間的不同點,下面就簡單說說:
設備像素:這個是物理層面的像素數量,比如一臺iPhone6,是375x667像素。(注:這里所說的設備像素有兩種類型,硬件像素和設備獨立像素,不過這個區別與此文無關);
CSS像素:這個是我們在CSS使用過程中的一個抽象的單位,它并沒有一個絕對的尺寸,頁面上單個CSS像素的大小完全取決于Viewport的大小;
Viewport:Viewport決定了頁面的像素密度。比如一個寬750px的Viewport,表示屏幕上橫向排布了750個CSS像素(Viewport在未縮放的情況下)。
</>復制代碼
Viewport是"無關設備"的,它不知道也不關心我們的設備到底有多大的屏幕。
大多數顯示器的Viewport尺寸默認在800px到1024px之間,這就解釋了為什么之前我們的例程可以在電腦上正常顯示而不用管當前屏幕的尺寸。
通過meta標簽來控制Viewport可以設置meta標簽中的viewport信息,以解決Viewport尺寸不匹配的問題。meta標簽的用法如下:
</>復制代碼
標簽內容中有6個關鍵字:
width
height
initial-scale
minimum-scale
maximum-scale
user-scalable
WIDTH可以用width來設置viewport的寬度,以替代那些不合適的默認寬度。我們可以給其設定一個固定大小,但設定成device-width更加明智一些,這樣我們可以兼容不同大小的屏幕。
</>復制代碼
加了這句話之后,我們的例程看起來就正常多了。
(在iPhone6上設置width=device-width之后的顯示效果)
在移動設備上,用戶有時會需要縮放頁面,當頁面縮放時,Viewport的像素尺寸也會相應的改變,但CSS尺寸不會變。
</>復制代碼
比如,在一個400px寬的Viewport中有一個元素,設定width: 100px;,這時該元素就橫跨了1/4的屏幕。如果用戶把頁面放大到兩倍大小,這時Viewport寬度變成了200px,但元素仍然寬100個CSS像素。這時這個元素就占了半個屏幕了。
我們可以通過initial-scale來設置CSS像素和Viewport像素之間的比例,通常情況下是1:1。這個參數的設置可以很好的解決width=device-width設置所帶來的問題。有些移動設備瀏覽器會在縱向模式時默認使用設備寬度,當切換到橫向模式時頁面顯示就會不正常。
(在沒有設置initial-scale的橫向iPhone6上的顯示效果)
如圖所示,當iPhone處于橫向模式時,我們看到的還是寬度小余500px時的頁面狀態。不過不要慌張,我們可以通過設置initial-scale為1來解決這個問題。
</>復制代碼
(在設置了initial-scale的橫向iPhone6上的顯示效果)
這幾個參數用來控制頁面的縮放能力。
Maximum-scale:這個是用戶可以縮放頁面的最大比例。比如說設置為1,用戶就無法縮放頁面。假如設置為2,用戶就可以把頁面放大到1個CSS像素等于2個Viewport像素的大小;
Minimum-scale:這個是用戶可以縮放頁面的最小比例。假如設置為2,頁面的最小比例就是原比例的兩倍,并且無法縮小到原始比例;
User-scalable:如果設置了user-scalable=no,用戶將無法對頁面進行縮放。
由于這幾個參數限制了用戶對頁面的操作,通常不建議使用它們。
用CSS來控制Viewport雖然現在很多人都在用viewport,但其實viewport并不是HTML5標準中的正式成員。W3C目前正在研究將viewport以@viewport規則的形式加入到CSS當中,@viewport規則與viewport標簽有異曲同工之妙,只是將用于布局的viewport歸還給CSS,現在已經有部分開發者在嘗試@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正式發布之前,還是先繼續使用viewport標簽吧,如果有興趣的話可以嘗試一下測試版的@viewport。
總結為了保證你的響應式頁面能夠在移動端正常運行,把下面這句話加到你的元素里面吧~
</>復制代碼
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/49587.html
摘要:當我們想根據屏幕尺寸來自動變化頁面布局時,我們會像這樣做在瀏覽器上調整窗口大小,可以看到網頁的響應能力是乎沒有任何問題的。在正式發布之前,還是先繼續使用標簽吧,如果有興趣的話可以嘗試一下測試版的。 新人翻譯,歡迎轉載~ 英文原文地址:http://bitsofco.de/2015/respove-design-viewport/ 原文例程地址:https://github...
摘要:今天在這里就略微談一下響應式布局吧想必大家都知道響應式布局已經在這個移動端為主流的時代成為了避不開的話題之一接下來我們從小到大來談談響應式網頁設計的基本原則為什么為什么需要響應式設計想必這點不說大家都能想到答案現在是一個移動為先的時代我們要 今天在這里就略微談一下響應式布局吧,想必大家都知道響應式布局已經在這個移動端為主流的時代成為了避不開的話題之一,接下來我們從小到大來談談響應式網頁...
摘要:常用單位在中可以用很多不同的方式來設定字體的尺寸。當你為一個元素添加單位時,應當考慮到所有父元素的字體尺寸。例寬度是中新提出的一個單位,通過寬度來計算字體尺寸。 個人翻譯,轉載請注明出處 英文原文:CSS Font Sizing 寫在前面 上一篇文章如何做好移動端的響應式設計:Viewport控制討論到了CSS像素,于是我決定研究一下如何用不同的方式來在CSS中設定字體...
摘要:正文概念本次要談的移動不是,只是很普通的移動端的界面。默認行為作為之前開發端的人員,第一反應就是如何把那么大的界面內容展現到手機小小的屏幕上。就是在顯示多行文字的時候,可能需要在自己期望顯示多少行之后,省略后面的文字,然后以。。。 前言 開發生涯總是豐富多采,工作多年,不同領域還是逃不過雨露均沾,之前開發過android,微信,ios,web網站也玩過。但是對于移動web這一塊,確實沒...
閱讀 2470·2021-11-19 09:59
閱讀 1993·2019-08-30 15:55
閱讀 936·2019-08-29 13:30
閱讀 1339·2019-08-26 10:18
閱讀 3088·2019-08-23 18:36
閱讀 2390·2019-08-23 18:25
閱讀 1162·2019-08-23 18:07
閱讀 439·2019-08-23 17:15