顛覆網路 35 天 (7b): Firefox 3.5 media query 簡介

原文出處，篇數太多不曉得怎麼開頭了 orz 反正大家看這系列下來應該都知道我是重點節譯。

現在可以上網看網頁的裝置越來越多，大家對網頁的期待也因裝置限制或功能而有所不同。CSS2 因此加上了媒體類別相關的設定，讓你可以指定某 CSS 宣告適用的裝置，像這樣：

<link rel="stylesheet" media="print" href="print.css">

這樣的確有效解決某些問題，不過網頁設計師要面對的不只是裝置的不同：即便是同一類型的裝置，也有可能有直放、橫擺、螢幕大小、解析度等等各式各樣的問題。Firefox 3.5 開始支援 CSS3 草案的 media query (媒體型態查詢) 機制，提供因應裝置各項特性而套用不同樣式的能力，讓各式裝置可以更適切地套用相應的樣式。以範例網頁來說，如果顯示範圍高大於寬 (直式)，則「all and (orientation:portrait) 成立、套用 portrait.css 樣式：

<link rel="stylesheet" media="all and (orientation:portrait)"
 href="portrait.css">

而如果顯示範圍寬大於高 (橫式)，則套用 landscape.css：

<link rel="stylesheet" media="all and (orientation:landscape)"
 href="landscape.css">

最棒的是，每次螢幕狀況有所轉換時，都會重新計算、套用一次樣式，所以當你以橫式的視窗開啟範例後，不妨慢慢調整視窗大小；一旦高大於寬 (變成直式)，套用的樣式會立即變更。

如果你打開 landscape.css 瞧瞧，會發現其中的某些樣式也採用 media query 來調整。例如網頁文字尺寸預設為 14px，但若顯示範圍寬度至少有 600px，則改用16px 字體顯示：

@media all and (min-width: 600px) {
  body {
    font-size: 16px;
  }
}

倘若顯示範圍再大一點、至少有 700px 寬的話，則採用 20px 的字體尺寸顯示文字：

@media all and (min-width: 700px) {
  body {
    font-size: 20px;
  }
}

還有另一條規則讓 800px 以上寬度的顯示介面擁有更大的字體，不另贅述。總之，當你調整視窗大小，就可以馬上發現變化。有一個不錯的應用點子，是隨著螢幕寬度調整內容欄數 — 越寬的的螢幕，分成越多欄來呈現。

目前 Firefox 3.5、Safari 3、Opera 7 以上的瀏覽器都媒體型態查詢，一般來說新版本瀏覽器是加上更多型態或查詢方式。Firefox 的相關文件請參考 MDC，而 Opera 9.5 的相關說明則在這篇接近最後的地方。目前沒有找到 WebKit 的相關資料。

無論使用者用哪樣的裝置瀏覽你的網站，利用媒體型態查詢功能、可以讓你做出更方便他閱讀的網頁。我的網誌應該會採用相應的技術來製作邊欄，你也試試吧！