學習之響應式Web設計：Media Queries和Viewports

題外話

本來是想寫篇關於Bootstrap的Scaffolding博文的，不過對於響應式Web設計不是很了解，所以就先有了這篇博文。

博客園原文地址：http://www.cnblogs.com/yhuang/archive/2012/03/29/responsive_web_design.html

 

目錄

前言

什么是響應式Web設計（Responsive Web design）?

響應式Web設計的用途

Media queries & Viewport

@media queries

viewports

width=device-width

initial-scale=1.0,maximum-scale=1.0

width=<actual width>

@media all and (device-width:480)

中間尺寸 

推薦設置

參考文章

前言

現在使用移動設備人越來越多，移動版的Website隨之也越來越重要；但是移動端設備的大小不一，屏幕分辨率各不相同，我們不可能為BlackBerry，iPhone， iPad等等每個都做單獨的頁面設計。所以我們需要的Website設計要能迎合多種device的要求並且兼容所有的屏幕分辨率，這種設計就叫響應式Web設計

 

什么是響應式Web設計（Responsive Web design）?

響應式Web設計是一種Web設計和開發能夠根據屏幕大小、平台和方向對用戶的行為和環境做出響應的設計。它包括了靈活的網格和布局，圖像和智能使用CSS的media queries特性。當用戶從Laptop切換到iPad上時，該網站應能自動地切換CSS規則以適應Device分辨率，圖像尺寸和腳本執行。換句話說，響應式Web設計是具備能夠自動響應用戶喜好的技術。這將一勞永逸的滿足對每個新上市的移動終端都要進行不同設計和開發的需求。

需要注意的是：響應式Web設計不僅僅是可調屏幕分辨率和可自動調整大小的圖像，而且更是一種采用全新思考的Website設計方法。

 

響應式Web設計的用途

隨着越來越多的設備而來的是各式各樣的屏幕分辨率、定義和方向。每天都有正在開發的新屏幕尺寸的設備。每個設備都可以擁有不同的尺寸、功能、甚至顏色。有些是橫向，有些是縱向，甚至還有些完全是正方形的。如圖所示：

 

下圖列出了一些最常見的：  所以，如果你要使你的客戶滿意，你必須讓你的網站能夠自動調整並適合上述設備的屏幕。例如，你應該為不同的設備定制不同的布局結構： 定制布局

同樣，有些時候，根據需要顯示或隱藏一些內容： 顯示或隱藏內容 

很明顯，我們不能為每一種設備定制一個頁面。所以，我們應該如何處理這種情況呢?

Media queries & Viewport

解決問題的關鍵就是Media queries和Viewports。下面的內容是關於如何最好的使用Media queries和Viewports的。但是我並不會深入的講怎樣增強響應的細節，如果感興趣，可以查看這篇博文的最后一部分：“參考文章”。

 

• @media queries

作為一個網頁設計師或前端開發者，我們希望我們的網頁總能很容易的自適應不同的設備和屏幕尺寸，不管我們用戶使用的是21"台式顯示器，13"筆記本電腦，10"的iPad或者更小的智能手機。響應式網頁設計使用@media queries根據瀏覽器的寬度和CSS來改變頁面的布局。我們可以這樣使用的CSS：

/* Default wide-screen styles */
@media all and (max-width: 1024px) {
    /* styles for narrow desktop browsers and iPad landscape */
}
@media all and (max-width: 768px) {
    /* styles for narrower desktop browsers and iPad portrait */
}
@media all and (max-width: 480px) {
    /* styles for iPhone/Android landscape (and really narrow browser windows) */
}
@media all and (max-width: 320px) {
    /* styles for iPhone/Android portrait */
}
@media all and (max-width: 240px) {
    /* styles for smaller devices */
}

是的，我們可以設置更小的width，或者中間尺寸。我待會再討論。CSS media queries是非常強大和復雜的，在這里不想過多的討論，因為上面的代碼已經足夠應付響應式Web設計了。如果你想要知道更多關於Media Queries的細節，請閱讀參考文獻里的相關文章。

• viewports

現在，當我們調整我們瀏覽器的大小時，上面的代碼已經可以非常不錯的完成工作了。但這並不能滿足移動端的瀏覽器。原因是移動端瀏覽器（iPhone/Safari, Android/Chrome和Fennec）會默認頁面是為寬屏幕設計的，所以將它縮小整個頁面來適應小屏幕。這就表明了上面的代碼完全不足於適應移動端的瀏覽器，因為設備無法識別正確的寬度。解決方法：在文檔的頭部使用蘋果提供的viewport meta標簽，並結合@media queries：

<meta name="viewport" content="...">

以上的代碼中，content為空，因為我覺得有必要詳細講一下，而不是直接給出來，這樣我們就能更清楚的記住，並且知道content里應該填些什么，並且為什么這樣填。

• • width=device-width

我們看見很多網站都建議把content屬性的值設置為width=device-width。這相當於告訴瀏覽器將頁面寬度假設為設備寬度。不幸的是，只有當設備是縱向時假設才是正確的。當我們把設備旋轉成橫向時，device-width還是和縱向的一樣（比如，320px），這意味着，即使我們把頁面設計成適應了480px橫向設備，它還是會返回320px的效果。

曾經嘗試在media query里使用orientation來解決這個問題，但是orientation不會真正的告訴我們實際的設備寬度，因為它只告訴我們設備的寬度是大於還是小於設備的高度。正如有人指出，由於大部分網頁往往垂直滾動，所以這是無關緊要的。

如果我們的頁面在縱向和橫向設備中樣式相同，那么我們就可以用width=device-width就足夠了，需要注意的是這個是唯一告訴android設備使用設備寬度的方法。

• • initial-scale=1.0,maximum-scale=1.0

initial-scale=1設置告訴瀏覽器初始化頁面時不要對頁面進行縮放。解決了沒有使用viewport時出現的頁面縮放問題。但還是有bug，當我們把移動端設備從縱向轉成橫向時，你就會發現這個問題了。這是因為initial-scale只在頁面完全加載后有作用。在我們把移動設備從縱向轉成橫向的過程中，瀏覽器就會認為頁面不變，但scales會設置為1.5，為了使320px的頁面適應480px。但是，因為我們在@media queries中設置了480px這個寬度，那么頁面CSS規則也會是適應480px的。結果就是，頁面CSS規則是適應480px的，另外scale還是1.5。這個結果並不可怕，但是不可取。

 

為解決這個bug，我們可以添加maximum-scale=1這個設置。它的作用是阻止頁面在旋轉時放大，但它同時帶來了更嚴重的問題：也阻止了用戶手動放大或縮小頁面。同樣user-scalable=no設置也會讓用戶不能縮放頁面。所以一般情況下，不要使用以上倆個設置。

是不是無法解決這個bug了？首先這個bug最多只是在顯示層面，帶來的后果一點不嚴重，因為即使頁面自動縮放了，它還是成比例的。

• • width=<actual width>

有些人建議在viewport里使用特定的width，並且也按這個width設計頁面。如果你可以為每個種類的device編寫頁面的話，這個設置是可行的，但需要我們明白的是它不是響應式設計。打印時，使用固定寬度布局是必要的，但我們網頁應該適應用戶的各種樣式的設備。總之，不要這樣使用。

• • @media all and (device-width:480)

這是個media query而不是viewport標簽里的選項, 我在很多地方看到過這樣的代碼，但我並不認為這是好的做法。為什么？根據CSS3對media queries的描述，device-width在media queries里表示的是輸出設備表面渲染的寬度。對於continuous media來說，device-width就是屏幕的寬度；對於paged media來說，device-width就是頁面尺寸的寬度。以continuous media為例，device-width就是設備屏幕的寬度。除非瀏覽器最大化，它始終大於viewport的width。

測試表明，大多數桌面瀏覽器把device-width和width當作同義詞。而移動端瀏覽器對此會有點混淆。至於viewport標簽里，device-width只在縱向時等於設備的width。例如，一個320*480的設備，device-width總是320px，不論方向。然而對於CSS media queries，device-width是基於其目前方向上屏幕的width。

如果你一定要這樣使用，請和orientation一起使用。但絕對不要使用max-device-width和min-device-width，因為用max-width和min-width替換會比較好。同樣需要注意的是，新型號設備的寬度可能會改變。 

• • 中間尺寸 

上面我提到過，我們可以為任意數量的width來設計頁面。最重要的是在不同width的瀏覽器中測試他們，通過調整window瀏覽器的大小來測試是最簡單的方法。隨着設計頁面的width越來越小，我們可以去掉（Display：none；）一些不重要的內容，比如footer，sidebars，menu等，為主要內容留足夠大的空間。我們的網站也許需要一個可以在所有width屏幕上運行良好的布局，也許只需要滿足兩到三個布局。這是非常容易設計和測試的，所以沒有理由不做。

• • 推薦設置

最后，是我推薦的做法：

1. 使用viewport標簽
2. 使用media queries來選擇最適合頁面尺寸的CSS
3. 在viewport標簽里，使用width=device-width,initial-scale=1或者單獨使用width=device-width
4. 不要使用maximum-scale=1和user-scalable=no
5. 不要使用width=<specific width>
6. 不要使用@media all and (*-device-width: xxx)

 

參考文章 

1. Ethan Marcotte. 2010. Responsive Web Design. In A List Apart #306. ISSN: 1534-0295.
2. Jeremy Keith. 2010. Responsive Enhancement. In adactio.
3. Kayla Knight. 2011. Responsive Web Design: What It Is and How To Use It. In Smashing Magazine.
4. Webkit based desktop browsers re-render the page correctly as you resize the browser, however they have a minimum width of 385px (on MacOSX) and I was unable to shrink the browser below this. Firefox 4 re-renders the page correctly until the width gets too narrow to fit the navigation toolbar. At that point the viewport width stays fixed even if you shrink the browser. The page is re-rendered if you type something (anything) into the URL bar. Opera 10/11 re-render correctly at all sizes.
5. Peter Paul Koch. 2010. A tale of two viewports — part two. In Quirksmode.
6. Using the Viewport on Safari. In Safari Web Content Guide.
7. The viewport meta tag. In Safari HTML Reference.
8. MDC. 2010. Using the viewport meta tag to control layout on mobile browsers. In Mozilla Developer Network.
9. Peter Paul Koch. 2010. Combining meta viewport and media queries. In Quirksmode.
10. Willison & Downe. Lanyrd.
11. Lie et al. 2010. Media Queries. W3C Candidate Recommendation 27 July 2010.
12. If you design your page for the narrow view and expect it to scale when rotated, then use width=device-width and nothing else. If, instead, you design your page for either width, then use width=device-width,initial-scale=1. This is the only way to get the android browser to render a page with the intended width. Mobile Safari will render the page exactly as if initial-scale=1 were specified alone. You will still end up with the zoom on rotate bug.
13. David Calhoun. 2010. The viewport metatag (Mobile web part I).

AC Milan vs. FC Barcelone : Milan, y croire... ou pas