Responsive Web Design:主動回應設計

作者: Jas / 發表於 2012-07-11

這幾年,隨著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規格的設計。





回上方