淺談響應式網頁設計 RWD
最近很熱門的響應式網頁設計，不曉得大家是否有聽說過？在一次與朋友的談天中聊到了這個技術，只是知道很多公司的網頁設計都已經開始做這樣的規劃，對於相關技術細節並未深究。本期電子報中透過網路資料的搜尋，找到了更多技術的細節，初淺的與大家探討一下這個技術不複雜卻很實用的功能。
由於通訊設備的發達，現今越來越多的消費者瀏覽網站不像以往只透過電腦設備，而是使用各式移動裝置如手機、平板。網站的設計師不得不面對一個難題，如何才能在大小不同的裝置上例如：手機 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。
