sidebar.inc.php

▶ 技術交流

淺談響應式網頁設計(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>

以上僅為個人資料蒐集與研究的心得分享,希望大家跟我一樣能夠有所收獲,也歡迎討論與指正。
推Plurk
列印
轉寄