技術交流

淺談響應式網頁設計 RWD

Dennis Dennis
更新於

最近很熱門的響應式網頁設計,不曉得大家是否有聽說過?在一次與朋友的談天中聊到了這個技術,只是知道很多公司的網頁設計都已經開始做這樣的規劃,對於相關技術細節並未深究。本期電子報中透過網路資料的搜尋,找到了更多技術的細節,初淺的與大家探討一下這個技術不複雜卻很實用的功能。

由於通訊設備的發達,現今越來越多的消費者瀏覽網站不像以往只透過電腦設備,而是使用各式移動裝置如手機、平板。網站的設計師不得不面對一個難題,如何才能在大小不同的裝置上例如:手機 3.5 吋、平板 9.7吋或是電腦 17 吋,呈現同樣的網頁內容?如果針對不同的設備撰寫不同的 Page 當然沒問題,但是這樣就會同時要維護多套不同的系統,造成人力物力財力的浪費。有沒有辦法只設計一套程式可以適應各種設備呢?答案當是有的,那就是使用響應式的設計。

2010 年,Ethan Marcotte 提出了 Responsive Web Design 這個名詞,指可以自動識別螢幕寬度、並做出相應調整的網頁設計。下面我們一起來看看如何實現。

HTML Head 添加 viewport Tag

HTML source code 的 <head> 部分增加 viewport meta tag,告訴 browser viewport 寬度等於設備的寬度且不進行初始化縮放。代碼如下:


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

此段代碼只支持 Chrome、Firefox、IE9+ 但不支援 IE9 以下版本的 Browser。那對於老舊的流覽器(IE6、7、8)怎麼辦呢?已經有熱心人開發了相關的 JS 代碼,託管在 Google Code 上,我們可以直接調用進來:


<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

CSS File 增加針對不同解析度規則

的核心就是 CSS3 引進的 Media Query Module,它可以自動偵測 Screen 的寬度,然後載入相應的 CSS File,如:如果 Screen 寬度小於 400 px 就 Load 400px。


<link rel="stylesheet" tpe="ext/css" media="screen and max-device-width:400px" href="400px.css"/>

如果 Screen 寬度在 400px~600px 之間的話就 Load 400-600px。


<link rel="stylesheet" tpe="ext/css" media="screen and (min-device-width:400px) and (max-device-width:600px " href="400-600px.css"/>

除上述使用的 HTML tag 外,也可以在 CSS File 中 Load 相應規則


@import url("400px.css") screen and (max-device-width: 400px); 

Layout 寬度設為相對寬度

在對網頁進行佈局時,不使用如 600px 之類固定數位的寬度設定,只能使用指定百分比的寬度


.example{
  width: 10%; 
  width: auto;
}

字體使用相對大小


body{
  font: normal 100% Helvetica, Arial, sans-serif; 
}
h1 { 
 font-size:1.5em; 
}

字體大小是是預設的 100% 即:16px 或是用 em 作為字體的大小單位

圖片使用相對大小

除了 Layout 和 Text,還要實現圖片的自動縮放。這個比較簡單簡單,加上如下一句就好:


img { max-width: 100%;}

流動佈局(Fluid Grid)

也就是在使用 Div 進行頁面的佈局時,每個 Block 都是浮動的,寬度也是百分比。


.left-sider{ 
 float:left; 
 width:30%; 
} 
.main-area{ 
 float:right; 
 width:70%; 
}

浮動的好處是,如果 screen 寬度太小放不下兩個 elements 時,後面的 element 會自動放到前一個 element 的下方,不會產生水準 scrollbar。