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

前言

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

什麼是響應式Web設計（Responsive Web design）？

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

需要注意的是：響應式Web設計不僅僅是

下圖列出了一些最常見的：

所以，如果你要使你的客戶滿意，你必須讓你的網站能夠自動調整並適合上述裝置的螢幕。例如，你應該為不同的裝置定製不同的布局結構：

定製布局

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

顯示或隱藏內容

很明顯，我們不能為每一種裝置定製一個頁面。所以，我們應該如何處理這種情況呢？