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

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;
    }
 
    #site-description {
        margin: 0 0 15px;
        position: static;
    }
 
    #content {
        width: auto;
        float: none;
        margin: 20px 0;
    }
 
    #sidebar {
        width: 100%;
        float: none;
        margin: 0;
    }
 
}

當瀏覽器可視部分寬度小於480px時

480px也就是iPhone橫屏時的寬度。當可視部分的寬度小於該數值時，咱們須要作如下調整：

禁用html節點的字號自動調整。默認狀況下，iPhone會將太小的字號放大，咱們能夠經過-webkit-text-size-adjust屬性進行調整。

將main-nav中的字號設置爲90%

@media screen and (max-width: 480px) {
 
    html {
        -webkit-text-size-adjust: none;
    }
 
    #main-nav a {
        font-size: 90%;
        padding: 10px 8px;
    }
 
}

彈性圖片

咱們須要爲圖片設置max-width:100%和height:auto，來實現其彈性化。對於IE，仍然須要一點額外的工做：

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

彈性內嵌視頻

一樣的，對於視頻，咱們也須要作max-width： 100%的設置；可是Safari對embed的該屬性支持不是很給力，因此咱們以width： 100%來代替：

.video embed,
.video object,
.video iframe {
    width: 100%;
    height: auto;
}

iPhone中的初始化縮放

默認狀況下，iPhone中的Safari瀏覽器會對頁面進行自動縮放，以適應屏幕尺寸。咱們可使用如下的meta設置，將設備的默認寬度做爲頁面在Safari的可視部分寬度，並禁止初始化縮放。

<meta name="viewport" content="width=device-width; initial-scale=1.0">

最終效果演示

該範例的最終演示正像咱們在本文開始時看到的那樣；另外記得，在條件容許的狀況下，使用各類典型移動設備（iPhone、iPad、Android、Blackberry等）來檢驗頁面的移動版本。

要點總結

Media Query JavaScript

對於那些尚不支持media query的瀏覽器，咱們要在頁面中調用css3-mediaqueries.js

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

CSS Media Queries

實現自適應頁面設計的關鍵之一，就是使用CSS根據分辨率寬度的變化來調整頁面佈局結構。

@media screen and (max-width: 560px) {
 
    #content {
        width: auto;
        float: none;
    }
 
    #sidebar {
        width: 100%;
        float: none;
    }
 
}

彈性圖片

經過max-width:100%和height:auto實現圖片的彈性化。

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

彈性內嵌元素（視頻）

經過width:100%和height:auto實現內嵌元素的彈性化。

.video embed,
.video object,
.video iframe {
    width: 100%;
    height: auto;
}

字號自動調整的問題

經過-webkit-text-size-adjust:none禁用iPhone中Safari的字號自動調整

html {
    -webkit-text-size-adjust: none;
}

頁面寬度縮放的問題

<meta name="viewport" content="width=device-width; initial-scale=1.0">