▶ 技術交流
淺談響應式網頁設計(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>