題外話
本來是想寫篇關於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的。但是我並不會深入的講怎樣增強響應的細節，如果感興趣，可以查看這篇博文的最後一部分：“參考文章”。
作為一個網頁設計師或前端開發人員，我們希望我們的網頁總能很容易的自適應不同的裝置和螢幕尺寸，不管我們使用者使用的是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的細節，請閱讀參考文獻裡的相關文章。
現在，當我們調整我們瀏覽器的大小時，上面的代碼已經可以非常不錯的完成工作了。但這並不能滿足移動端的瀏覽器。原因是移動端瀏覽器（iPhone/Safari, Android/Chrome和Fennec）會預設頁面是為寬螢幕設計的，所以將它縮小整個頁面來適應小螢幕。這就表明了上面的代碼完全不足於適應移動端的瀏覽器，因為裝置無法識別正確的寬度。解決方案：在文檔的頭部使用蘋果提供的viewport meta標籤，並結合@media queries：
<meta name="viewport" content="...">
以上的代碼中，content為空白，因為我覺得有必要詳細講一下，而不是直接給出來，這樣我們就能更清楚的記住，並且知道content裡應該填些什麼，並且為什麼這樣填。
我們看見很多網站都建議把content屬性的值設定為width=device-width。這相當於告訴瀏覽器將頁面寬度假設為裝置寬度。不幸的是，只有當裝置是縱向時假設才是正確的。當我們把裝置旋轉成橫向時，device-width還是和縱向的一樣（比如，320px），這意味著，即使我們把頁面設計成適應了480px橫向裝置，它還是會返回320px的效果。
曾經嘗試在media query裡使用orientation來解決這個問題，但是orientation不會真正的告訴我們實際的裝置寬度，因為它只告訴我們裝置的寬度是大於還是小於裝置的高度。正如有人指出，由於大部分網頁往往垂直滾動，所以這是無關緊要的。
如果我們的頁面在縱向和橫向裝置中樣式相同，那麼我們就可以用width=device-width就足夠了，需要注意的是這個是唯一告訴android裝置使用裝置寬度的方法。
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最多隻是在顯示層面，帶來的後果一點不嚴重，因為即使頁面自動縮放了，它還是成比例的。
有些人建議在viewport裡使用特定的width，並且也按這個width設計頁面。如果你可以為每個種類的device編寫頁面的話，這個設定是可行的，但需要我們明白的是它不是響應式設計。列印時，使用固定寬度布局是必要的，但我們網頁應該適應使用者的各種樣式的裝置。總之，不要這樣使用。
這是個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螢幕上運行良好的布局，也許只需要滿足兩到三個布局。這是非常容易設計和測試的，所以沒有理由不做。
最後，是我推薦的做法：
- 使用viewport標籤
- 使用media queries來選擇最適合頁面尺寸的CSS
- 在viewport標籤裡，使用width=device-width,initial-scale=1或者單獨使用width=device-width
- 不要使用maximum-scale=1和user-scalable=no
- 不要使用width=<specific width>
- 不要使用@media all and (*-device-width: xxx)
參考文章
- Ethan Marcotte. 2010. Responsive Web Design. In A List Apart #306. ISSN: 1534-0295.
- Jeremy Keith. 2010. Responsive Enhancement. In adactio.
- Kayla Knight. 2011. Responsive Web Design: What It Is and How To Use It. In Smashing Magazine.
- 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.
- Peter Paul Koch. 2010. A tale of two viewports — part two. In Quirksmode.
- Using the Viewport on Safari. In Safari Web Content Guide.
- The viewport meta tag. In Safari HTML Reference.
- MDC. 2010. Using the viewport meta tag to control layout on mobile browsers. In Mozilla Developer Network.
- Peter Paul Koch. 2010. Combining meta viewport and media queries. In Quirksmode.
- Willison & Downe. Lanyrd.
- Lie et al. 2010. Media Queries. W3C Candidate Recommendation 27 July 2010.
- 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.
- David Calhoun. 2010. The viewport metatag (Mobile web part I).
AC Milan vs. FC Barcelone : Milan, y croire... ou pas
