針對多種螢幕解析度做網頁排版

想像一下十年前上網的樣子：坐在電腦前，一隻手拿著滑鼠，眼睛死盯著螢幕上開著的瀏覽器。而現在，幾乎只要有連線能力的裝置都有辦法上網，電視可以上網、遊樂器可以上網、手機可以上網，操控工具也從原來的鍵盤變成了電視遙控器、搖桿或是你的手指。瀏覽網頁的方式變得多元化之後，網頁也必須要做得更有彈性，讓使用者無論在哪種裝置上都能有良好的使用體驗。

本文就是要針對CSS3的新功能Media Queries(註1)所發展出的Responsive Web Design(註2，找到的翻譯都很怪，自己來亂翻一下－自調式設計模式)來做個介紹。其概念很簡單，既然解析度百百種，我們就先設計好幾種CSS模板(ex. 手機看的、平板看的(直式)、平板看的(橫式)、一般螢幕看的、高解析螢幕看的)，然透過Media Queries先取得瀏覽器/裝置的資訊(主要是螢幕解析度以及視窗解析度)之後，決定我們要使用哪種CSS模板來套用至網頁的排版。網頁內容不會改變，只是在不同環境下的呈現方式不同而已。

實作上來說，需要多兩個工作：1. 設計不同情境下使用的CSS，2. 利用Media Queries套用至不同瀏覽環境。喔其實還有第三點，針對不支援原生Media Queries的瀏覽器做設計，詳見後文。
第一點就不多說了，當我們把情況簡化成：手機看的、平板看的(直式)、平板看的(橫式)、一般螢幕看的、高解析螢幕看的，那麼CSS的排版就跟原本一樣，不用考慮太多。

2. 利用Media Queries套用至不同瀏覽環境，這又有兩種方式可完成：

A. 在引入CSS時做判斷

<link href="shetland.css" media="screen and (max-device-width: 480px)" rel="stylesheet" type="text/css"></link>

在這，除了原本的CSS引入語法之外，我們增加了一個判斷屬性media，並且在media裡面判斷：media type要等於screen、以及裝置最大寬度為480px。換句話說，如果你用iphone4看該網頁，shetland.css就會被引入，但如果用一般1024*768的螢幕去看，這個CSS就不會被引入。

B. 在CSS檔案內做判斷

@media screen and (max-device-width: 480px) {
  .column {
    float: none;
  }
}

同樣的效果，如果只是少數class需要針對不同環境作設定也可以這樣做。 至於Media Queries還有什麼其他特別的功能(比如說取得裝置的orientation)，可以參考註一。

TIPS：

1. 在舊的或不支援的瀏覽器(想也知道是IE...)上要怎麼辦？
   a. 現有的Javascript library：JQuery Media Queries、css3-mediaqueries-js
   b. 當效果還是不良時，就沿用舊有的設計方式吧 CSS layout patterns
2. 針對iphone4專用的css(retina display)

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />

3. 直式橫式套用不同CSS

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

附註：

1. Media Queries Reference
2. A List apart - Responsive Web Design
3. CSS layout with landscape/portrait orientation modes