Responsive Web Design：主動回應設計

這幾年，隨著iPhone、iPad在消費市場成功引領潮流，手機與平板隨之崛起，網頁設計似乎也順勢進入一個螢幕顯示多規格（Multi-Device）的時代。

對網頁設計師來說，桌機（Desktop PC）的問題始終不大，畢竟那本來就是網頁設計的元祖舞台。

當下真正令網頁設計師頭痛的問題，應該是：如何讓一開始為桌機瀏覽器量身訂製的網頁，同樣也一體適用於手機與平板螢幕。

這個問題有多令人頭痛呢？其實只要嚐試清算一下市面上既有的螢幕規格，大概就不難想像。

具體來說，即便全面捨棄Google Android機海不管，光是相對單純的Apple iOS，現階段螢幕的主流規格就有：

1. iPhone 3GS：480 × 320 px (163 ppi)
2. iPhone 4/ 4S：960 × 640 px (326 ppi)
3. iPad 2：1024 × 768 pixels (132 ppi)
4. New iPad (3rd generation)：2048 × 1536 px (264 ppi)

如何以網頁設計來解決行動裝置螢幕解析尺寸不一的問題呢？

近來愈趨熱門的解答應該是：Responsive Web Design。

很多人不約而同都因為讀到A List Apart的這篇文章才初識Responsive Web Design，而其中大多數網頁設計師又難免會心生「原來這就叫Responsive Web Design」的感嘆。

Responsive Web Design這個東西，其實有點像Web2.0的AJAX，早在技術被廣泛應用成為熱門顯學之前，概念已經存在很久很久了。

譬如說在網頁設計也必須考慮列印紙本的過去，網頁設計師總要另外再餵一個css給印表機去排版列印。

<link rel="stylesheet" type="text/css" href="screen.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

如今解決行動裝置螢幕解析尺寸不一的問題，大概也是依循同樣的邏輯。

提到網頁設計，自然離不開HTML跟CSS。在這兩方面，Responsive Web Design的具體作法大概是這樣的：

（1）HTML：利用<meta>標籤的viewport來設定瀏覽器可視區域；利用<link>標籤的media，依據不同螢幕尺寸來指定外連CSS檔。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

及

<link href="css/mobile-small.css" media="all and (min-width: 320px) and (max-width: 479px)" rel="stylesheet" type="text/css" />
<link href="css/mobile-big.css" media="all and (min-width: 480px) and (max-width: 767px)" rel="stylesheet" type="text/css" />

（2）CSS：利用CSS3的Media Query，為不同的螢幕解析尺寸提供不同的參數值。

/* 直式 (Portrait) */
/* 為寬320px的螢幕而設計 */
@media only screen and (max-width: 767px) {
header{……}
content{……}
footer{……}
}
/* 為寬768px的螢幕而設計 */
@media only screen and (min-width: 768px) and (max-width: 959px) {
　 header{……}
content{……}
footer{……}
}
/* 橫式 (Landscape) */
/* 為寬480px的螢幕而設計 */
@media only screen and (min-width: 480px) and (max-width: 767px) {
　 header{……}
content{……}
footer{……}
}

對台灣的網頁設計師來說，關於Responsive Web Design的另一個難題是：找不到合適的中文專有名辭翻譯。

「Web Design」，大家都知道是「網頁設計」。至於，「Responsive」這個字，原意是「有回應」、「迴響」或「響應」的意思。

坊間既有的「自適應網頁設計」、「響應式網頁設計」……感覺上似乎都不夠清楚傳達Responsive Web Design這種預設條件、提前設定主動回應的設計精神。

所以，想想還是就叫它Responsive Web Design，頂多再補註這是一種為了讓網頁能夠主動回應Multi-Device規格的設計。