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 可以幫你擷取以下資料：

• 瀏覽器視窗的寬和高
• 裝置的寬和高
• 裝置的手持方向，橫向還是豎向
• 解析度

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

a Mobile Version of Your Website" width="480" height="350">

Mobile Version of Your Website" width="320" height="480">

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

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

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

Mobile Version of Your Website" width="480" height="305">

為了讓這個布局更好地在手機上顯示，我們為手機版設計一個一欄式布局，且縮小 header 部分的圖片大小。

使用 Media Queries 最直接的方法是，在你的 CSS 代碼中，加一段獨立代碼分支，如下：

Mobile Version of Your Website" width="320" height="480">

更多資源

• 後
  移動時代的 Web 設計
• A
  List Apart – Responsive Web Design （ALA - 反應靈敏的 Web 設計）
• Apple
  – Safari Web Content Guide
  （Apple - Safari Web 內容指引）
• Sitepoint CSS
  Reference – Media Queries （SitePoint 的 CSS 參考手冊 - Media Queries）
• Targeting
  the iPhone 4 Retina Display with CSS3 Media Queries （使用 CSS3 Media
  Queries 實現面向 iPhone 4 高精細顯示屏的設計）
• Aral Balkan: How to make your web
  content look stunning on the iPhone 4’s new Retina Display
  （Aral
  Balkan：如何讓你的 Web 內容在 iPhone 4 的高精細屏上更好地顯示
  ）
• Stuff
  and Nonsense: Proportional leading with CSS3 Media Queries （使用 CSS3
  Media Queries 實現按比例行間距）
• Matthew
  James Taylor: iPad layout with landscape and portrait modes
  （iPad
  的水平和垂直配置模式）

在舊瀏覽器上支援 Media Queries

如果你面向的訪問者是 iPhone， Opera Mini 等行動裝置，這沒有問題，對於那些不支援 Media Queries
的瀏覽器（像 IE6/7/8），以下文章或許對你有協助。

• Media Queries section on
  When Can I Use, showing which browsers have support
  （Media Queries
  的瀏覽器支援情況）
• Media Queries
  jQuery plugin (only deals with max/min width) （Media Queries jQuery 外掛程式）
• css3-mediaqueries-js
  – a library that aims to add media query support to non-supporting
  browsers
  （在不支援 Media Queries 的瀏覽器中實現對 Media Queries 的支援）

更多樣本

Jon Hicks 在 Hicksdesign
基於 Media Queries 實現了非常好的瀏覽體驗，不僅針對行動裝置，還面向那些擁有小螢幕的案頭系統。另外，還可以看看 Simon Collison’s
website
以及 Ed Merritt’s portfolio

這些網站中對這種技術的運用。

本文作者

Rachel
Andrew

Rachel Andrew 是一名 Web 前端設計師與後端開發人員，是一家英國 Web 開發顧問公司 edgeofmyseat.com
的主管，她還是一款小型 CMS 系統 Perch
的設計者。她寫過多本 Web 開發與設計相關的書，包括由
SitePoint 出版的 CSS Anthology: 101 Essential Tips, Tricks and
Hacks，她的個人部落格是 rachelandrew.co.uk
。

本文國際來源：Smashing Magazine
How
To Use CSS3 Media Queries To Create a Mobile Version of Your Website

中文翻譯來源：銳商企業CMS
網站內容管理系統
官方網站