HTML5和CSS3 Media Queries響應式Web設計方案

文章簡介：通過CSS3 Media Query實現響應式Web設計.

十一長假已然過去了一大半。今天倒真是晴朗的不行，向窗外望去幾乎可以看到陽光穿過涼爽的空氣一縷縷灑落下來的樣子。自從不再是學生，對每年的幾次長假就無比珍惜，想方設法讓每一天都盡量過的飽滿一些；夜裡閉上眼，滿腦子就都是Drupal、部落格、咖啡、使命召喚、南方公園。..也許需要出門走一走了。

OK開始說正經的了。在之前一篇譯文中，我們瞭解了響應式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方面的工作，頁面還不能隨著瀏覽器尺寸的變化而改變布局。