通過CSS3 Media Query實現響應式Web設計

　　在之前一篇譯文中，我們瞭解了響應式Web設計的概念、組成要素以及基本的實現思路。今天繼續相關話題，我們將從前文介紹過的“彈性佈局結構”這方面出發，通過一個具體的例項來深入學習。

　　如今的螢幕解析度，小至320px(iPhone)，大到2560px甚至更高(大顯示器)，變化範圍極大。除了使用傳統的桌上型電腦，使用者會越來越多的通過手機、上網本、iPad一類的平板裝置來瀏覽頁面。這種情況下，固定寬度的設計方案將會顯得越發不合理。頁面需要有更好的適應性，其佈局結構要做到根據不同的裝置及螢幕解析度進行響應調整。接下來，我們將瞭解一下怎樣通過HTML5和CSS3 Media Queries(媒介查詢)相關技術來實現跨裝置跨瀏覽器的響應式Web設計方案。

　　範例效果預覽

　　首先，我們來看看本篇範例的最終效果演示。開啟該頁面，拖拽瀏覽器邊框，將視窗慢慢縮小，同時觀察頁面結構及元素佈局是怎樣基於寬度變化而自動響應調整的。

　　更多範例

　　我(原文作者)使用media query的方式設計了一些WordPress模板，比如Tisa、Elemin、Suco、iTheme2、Funki、Minblr和Wumblr等。

　　概述

　　我們將範例頁面的父級容器寬度設定為固定的980px，對於桌面瀏覽環境，該寬度適用於任何寬於1024畫素的解析度。我們通過media query來監測那些寬度小於980px的裝置解析度，並將頁面的寬度設定由“固定”方式改為“液態”，佈局元素的寬度隨著瀏覽器視窗的尺寸變化進行調整。當可視部分的寬度進一步減小到650px以下時，主要內容部分的容器寬度會增大至全屏，而側邊欄將被置於主內容部分的下方，整個頁面變為單欄佈局。

　　HTML程式碼

　　我們將把注意力集中在頁面的主要佈局方面，並使用HTML5標籤來更加語義化的實現這些結構，包括頁頭、主要內容部分、側邊欄和頁尾：

<div id="pagewrap">

	<header id="header">
		<hgroup>
			<h1 id="site-logo">Demo</h1>
			<h2 id="site-description">Site Description</h2>
		</hgroup>
		<nav>
			<ul id="main-nav">
				<li><a href="#">Home</a></li>
			</ul>
		</nav>
		<form id="searchform">
			<input type="search">
		</form>
	</header>
	
	<div id="content">
		<article class="post">
			blog post
		</article>
	</div>
	
	<aside id="sidebar">
		<section class="widget">
			 widget
		</section>
	</aside>

	<footer id="footer">
		footer
	</footer>
	
</div>

　　HTML5.js

　　IE是永恆的話題；對於我們使用的HTML5標籤，IE9之前的版本無法提供支援。目前的最佳解決方案仍是通過html5.js來幫助這些舊版本的IE瀏覽器建立HTML5元素節點。在我們的頁面HTML程式碼中呼叫該JS檔案：

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

　　CSS

　　HTML5塊級元素樣式

　　首先仍是瀏覽器相容問題。雖然我們已經可以在低版本的IE中建立HTML5元素節點，但還是需要在樣式方面做些工作，將這些“新”元素宣告為塊級：

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block;
}

　　主要結構的CSS

　　忽略細節，我們仍是將注意力集中在大問題上。正如在前文“概述”中提到的，預設情況下頁面容器的固定寬度為980畫素，頁頭部分(header)的固定高度為160畫素；主要內容部分(content)的寬度為600畫素，左浮動；側邊欄(sidebar)右浮動，寬度為280畫素。

#pagewrap {
	width: 980px;
	margin: 0 auto;
}

#header {
	height: 160px;
}

#content {
	width: 600px;
	float: left;
}

#sidebar {
	width: 280px;
	float: right;
}

#footer {
	clear: both;
}

　　截至目前的效果演示

　　目前我們只是初步完成了頁面結構的HTML和預設結構樣式，當然，並不包括那些與話題無關的細節實現問題。正如可以在目前的演示中看到的，由於還沒有做任何media query方面的工作，頁面還不能隨著瀏覽器尺寸的變化而改變佈局。