▶ 技術交流
淺談響應式網頁設計（Responsive Web Design）
文 - Dennis
關鍵字：回應式網頁、適應式網頁、響應式網頁、網頁設計、技術、CSS、html、程式、移動裝置
最近很熱門的響應式網頁設計，不曉得大家是否有聽說過？在一次與朋友的談天中聊到了這個技術，只是知道很多公司的網頁設計都已經開始做這樣的規劃，對於相關技術細節並未深究。本期電子報中透過網路資料的搜尋，找到了更多技術的細節，初淺的與大家探討一下這個技術不複雜卻很實用的功能。
由於通訊設備的發達，現今越來越多的消費者瀏覽網站不像以往只透過電腦設備，而是使用各式移動裝置如手機、平板。網站的設計師不得不面對一個難題，如何才能在大小不同的裝置上例如：手機 3.5 吋、平板 9.7吋或是電腦 17 吋，呈現同樣的網頁內容？如果針對不同的設備撰寫不同的 Page 當然沒問題，但是這樣就會同時要維護多套不同的系統，造成人力物力財力的浪費。有沒有辦法只設計一套程式可以適應各種設備呢？答案當是有的，那就是使用響應式的設計。
2010 年，Ethan Marcotte 提出了”自我調整網頁設計”（Responsive Web Design）這個名詞，指可以自動識別螢幕寬度、並做出相應調整的網頁設計。下面我們一起來看看如何實現。
1. HTML Header 添加 ”viewport” Tag
在 Page 的 Html Source Code 的 <head> 部分增加 viewport meta tag，告訴 Browser viewport 寬度等於設備的寬度且不進行初始化縮放。代碼如下：
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
</body>
</html>
Tips：此段代碼只支持 Chrome、Firefox、IE9+ （含 9）但不支援 IE9 以下版本的 Browser。那對於老舊的流覽器（IE6、7、8）怎麼辦呢？已經有熱心人開發了相關的 JS 代碼，託管在 Google Code 上，我們可以直接調用進來，如下代碼，加在 <head> tag 裡即可：
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
2. CSS File 尾部增加針對不解析度規則
“Responsive Web Design“的核心就是 CSS3 引進的 Media Query Module，它可以自動偵測 Screen 的寬度，然後載入相應的 CSS File，如：如果 Screen 寬度小於 400 px 就 Load 400px。css 代碼如下：
<link rel="stylesheet" tpe="ext/css" media="screen and max-device-width:400px" href="400px.css"/>
2.1 如果 Screen 寬度在 400px~600px 之間的話就 Load 400-600px。css 代碼如下：
<link rel="stylesheet" tpe="ext/css" media="screen and （min-device-width:400px） and （max-device-width:600px " href="400-600px.css"/>
2.2 除上述使用的 html tag 外，也可以在 CSS File 中 Load 相應規則的 CSS File 代碼如下：
@import url（"400px.css"） screen and （max-device-width: 400px）;
3. Layout 寬度設為相對寬度
在對網頁進行佈局時，不使用如 600px 之類固定數位的寬度設定，如：
width: xx px;
只能使用指定百分比的寬度，如：
width: xx%;
width: auto;
4. 字體使用相對大小
字體相對大小，如：
body {
font: normal 100% Helvetica, Arial, sans-serif;
}
上面的代碼表示字體大小是是預設的 100% 即：16px 或是用 em 作為字體的大小單位：
h1 {
font-size:1.5em;
}
5. 圖片使用相對大小
除了 Layout 和 Text，還要實現圖片的自動縮放。這個比較簡單簡單，加上如下一句就好：
img { max-width: 100%;}
6. 流動佈局（Fluid Grid）
也就是在使用 Div 進行頁面的佈局時，每個 Block 都是浮動的，寬度也是百分比。如下：
.left-sider{
float:left;
width:30%;
}
.main-area{
float:right;
width:70%;
}
浮動的好處是，如果 screen 寬度太小放不下兩個Elements 時，後面的 Element 會自動放到前一個 Element 的下方，不會產生水準 scrollbar。
簡單例子，有興趣的朋友可以 Copy 如下代碼 Save 成 .html File，然後用Browser打開，然後縮放或是拉大 Browser Window 看效果 ：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- viewport meta to reset iPhone inital scale -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Web Design Sample Page</title>
<!-- css3-mediaqueries.js for <= IE8 Browser -->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<style type="text/css">
body {
font: 1em/150% Arial, Helvetica, sans-serif;
}
a {
color: #669;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
h1 {
font: bold 100% Arial, Helvetica, sans-serif;
}
/* Page Structure */
#pagewrap {
padding: 5px;
width: 960px;
margin: 20px auto;
}
#header {
height: 68px;
}
#content {
width: 600px;
float: left;
}
#sidebar {
width: 300px;
float: right;
}
#footer {
clear: both;
}
/* MEDIA QUERIES*/
/* for 980px or less */
@media screen and （max-width: 980px） {
#pagewrap {
width: 94%;
}
#content {
width: 65%;
}
#sidebar {
width: 30%;
}
}
/* for 700px or less */
@media screen and （max-width: 700px） {
#content {
width: auto;
float: none;
}
#sidebar {
width: auto;
float: none;
}
}
/* for 480px or less */
@media screen and （max-width: 480px） {
#header {
height: auto;
}
h1 {
font-size: 24px;
}
#sidebar {
display: none;
}
}
/* border & guideline （you can ignore these） */
#content {
background: #ccc;
}
#sidebar {
background: #f0efef;
}
#header, #content, #sidebar {
margin-bottom: 5px;
}
#pagewrap, #header, #content, #sidebar, #footer {
border: solid 1px #000;
}
</style>
</head>
<body>
<div id="pagewrap">
<div id="header">
<h1>Header</h1>
</div>
<div id="content">
<h2>Test</h2>
<p>這是測試內容</p>
</div>
<div id="sidebar">
<h3>右邊區</h3>
<p>標題一</p>
<p>標題二</p>
</div>
<div id="footer">
<h4>Copyright©2014 ARES International</h4>
</div>
</div>
</body>
</html>
