CSS3 Media Query：移動Web的完美開端

移動時代，是任何 Web 設計與開發人員都不能忽視的一個時代，總有一天，你設計的東西將被顯示在兩種螢幕上，案頭大螢幕和移動小螢幕，如何讓同一個網站同時適應完全不同的兩種尺寸 的螢幕，這是一個很久以來都沒有完美解決方案的問題，直到有了 CSS3。

CSS3 的 Media Queries

在 CSS2 時代，如果你曾經為你的網站設計過列印版 CSS，就會明白 CSS3 Media Queries 的作用，不過，CSS3 的 Media Queries 比 CSS2 的 Media Type 更實用，事實上，CSS2 的 Media Type 並不曾被多少裝置所支援過。CSS3 的 Media Queries 可以幫你擷取以下資料：

1.瀏覽器視窗的寬和高

2.裝置的寬和高

3.裝置的手持方向，橫向還是豎向

4.解析度

如果使用者有一個支援 Media Queries 的裝置，我們就可以為該裝置編寫專門的 CSS，讓網站適應這個裝置的小螢幕，英國的 Web 技術大會 dConstruct 便基於該技術推出他們的 2010 年大會網站，手機也可以輕鬆訪問，以下是該網站的案頭版和手機版截圖：

這個網站在不同尺寸的裝置上按不同的布局顯示，並且，手機版在 iPhone，Opera Mini， Android 等裝置上有完全一致的表現。

使用 Media Queries 為手機建立單獨的 CSS

我們舉一個簡單的兩欄式結構的例子。