通過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方面的工作，頁面還不能隨著浏覽器尺寸的變化而改變布局。

CSS3 Media Query

終於開始說正事兒了。首先我們需要在頁面中調用css3-mediaqueries.js文件，來幫助IE8或是之前的版本支持CSS3 media queries：

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

接下來，我們要創建CSS樣式表，並在頁面中調用：

<link href="media-queries.css" rel="stylesheet" type="text/css">

當浏覽器可視部分寬度大於650px小於980px時（液態布局）

將pagewrap的寬度設置為95%

將content的寬度設置為60%

將sidebar的寬度設置為30%

@media screen and (max-width: 980px) {
  
     #pagewrap {
         width: 95%;
     }
  
     #content {
         width: 60%;
         padding: 3% 4%;
     }
  
     #sidebar {
         width: 30%;
     }
     #sidebar .widget {
         padding: 8% 7%;
         margin-bottom: 10px;
     }
  
 }

當浏覽器可視部分寬度小於650px時（單欄布局）

將header的高度設置為auto

將searchform絕對定位在top 5px的位置

將main-nav、site-logo、site-description的定位設置為static

將content的寬度設置為auto（主要內容部分的寬度將擴展至滿屏），並取消float設置

將sidebar的寬度設置為100%，並取消float設置

@media screen and (max-width: 650px) {
  
     #header {
         height: auto;
     }
  
     #searchform {
         position: absolute;
         top: 5px;
         right: 0;
     }
  
     #main-nav {
         position: static;
     }
  
     #site-logo {
         margin: 15px 100px 5px 0;
         position: static;
     }
  
     #si