如今的屏幕分辨率，小至320px(iPhone)，大到2560px甚至更高(大顯示器)，變化範圍極大。除了使用傳統的臺式機，用戶會越來越多的通過手機、上網本、iPad一類的平板設備來瀏覽頁面。
這種情況下，固定寬度的設計方案將會顯得越發不合理。頁面需要有更好的適應性，其佈局結構要做到根據不同的設備及屏幕分辨率進行響應調整。
接下來，我們將瞭解一下怎樣通過HTML5和CSS3 Media Queries(媒介查詢)相關技術來實現跨設備跨瀏覽器的響應式Web設計方案。
範例效果預覽
首先，我們來看看本篇範例的最終效果演示。打開該頁面，拖拽瀏覽器邊框，將窗口慢慢縮小，同時觀察頁面結構及元素佈局是怎樣基於寬度變化而自動響應調整的。
概述
我們將範例頁面的父級容器寬度設置爲固定的980px，對於桌面瀏覽環境，該寬度適用於任何寬於1024像素的分辨率。我們通過media query來監測那些寬度小於980px的設備分辨率，並將頁面的寬度設置由“固定”方式改爲“液態”，佈局元素的寬度隨着瀏覽器窗口的尺寸變化進行調整。當可視部分的寬度進一步減小到650px以下時，主要內容部分的容器寬度會增大至全屏，而側邊欄將被置於主內容部分的下方，整個頁面變爲單欄佈局。
HTML代碼
我們將把注意力集中在頁面的主要佈局方面，並使用HTML5標籤來更加語義化的實現這些結構，包括頁頭、主要內容部分、側邊欄和頁腳：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <divid="pagewrap"><headerid="header"><hgroup><h1id="site-logo">Demo</h1><h2id="site-description">Site Description</h2></hgroup><nav><ulid="main-nav"><li><ahref="#">Home</a></li></ul></nav><formid="searchform"><inputtype="search"></form></header><divid="content"><articleclass="post">blog post </article></div><asideid="sidebar"><sectionclass="widget">widget </section></aside><footerid="footer">footer </footer></div> |
HTML5
IE是永恆的話題;對於我們使用的HTML5標籤，IE9之前的版本無法提供支持。目前的最佳解決方案仍是通過html5.js來幫助這些舊版本的IE瀏覽器創建HTML5元素節點。在我們的頁面HTML代碼中調用該JS文件：
1 2 3 | <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> |
CSS
HTML5塊級元素樣式
首先仍是瀏覽器兼容問題。雖然我們已經可以在低版本的IE中創建HTML5元素節點，但還是需要在樣式方面做些工作，將這些“新”元素聲明爲塊級：
1 2 3 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } |
主要結構的CSS
忽略細節，我們仍是將注意力集中在大問題上。正如在前文“概述”中提到的，默認情況下頁面容器的固定寬度爲980像素，頁頭部分(header)的固定高度爲160像素;主要內容部分(content)的寬度爲600像素，左浮動;側邊欄(sidebar)右浮動，寬度爲280像素。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | #pagewrap { width: 980px; margin: 0auto; } #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：
1 2 3 | <!--[if lt IE 9]><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]--> |
接下來，我們要創建CSS樣式表，並在頁面中調用：
1 | <linkhref="media-queries.css"rel="stylesheet"type="text/css"> |
當瀏覽器可視部分寬度大於650px小於980px時(液態佈局)
將pagewrap的寬度設置爲95%
將content的寬度設置爲60%
將sidebar的寬度設置爲30%
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | @media screenand (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設置
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | @media screenand (max-width: 650px) { #header { height: auto; } #searchform { position: absolute; top: 5px; right: 0; } #main-nav { position: static; } #site-logo { margin: 15px100px5px0; position: static; } #site-description { margin: 0015px; position: static; } #content { width: auto; float: none; margin: 20px0; } #sidebar { width: 100%; float: none; margin: 0; } } |
當瀏覽器可視部分寬度小於480px時
480px也就是iPhone橫屏時的寬度。當可視部分的寬度小於該數值時，我們需要做以下調整：
禁用html節點的字號自動調整。默認情況下，iPhone會將過小的字號放大，我們可以通過-webkit-text-size-adjust屬性進行調整。
將main-nav中的字號設置爲90%
彈性圖片
我們需要爲圖片設置max-width: 100%和height: auto，來實現其彈性化。對於IE，仍然需要一點額外的工作：
1 2 3 4 5 | img { max-width: 100%; height: auto; width: auto9; /* ie8 */} |
彈性內嵌視頻
同樣的，對於視頻，我們也需要做max-width: 100%的設置;但是Safari對embed的該屬性支持不是很給力，所以我們以width: 100%來代替：
1 2 3 4 5 6 | .video embed, .video object, .video iframe { width: 100%; height: auto; } |
iPhone中的初始化縮放
默認情況下，iPhone中的Safari瀏覽器會對頁面進行自動縮放，以適應屏幕尺寸。我們可以使用以下的meta設置，將設備的默認寬度作爲頁面在Safari的可視部分寬度，並禁止初始化縮放。
1 | <metaname="viewport"content="width=device-width; initial-scale=1.0"> |
最終效果演示
該範例的最終演示正像我們在本文開始時看到的那樣;另外記得，在條件允許的情況下，使用各種典型移動設備(iPhone、iPad、Android、Blackberry等)來檢驗頁面的移動版本。
要點總結
Media Query JavaScript
對於那些尚不支持media query的瀏覽器，我們要在頁面中調用css3-mediaqueries.js
1 2 3 | <!--[if lt IE 9]><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]--> |
CSS Media Queries
實現自適應頁面設計的關鍵之一，就是使用CSS根據分辨率寬度的變化來調整頁面佈局結構。
1 2 3 4 5 6 7 8 9 10 | @media screenand (max-width: 560px) { #content { width: auto; float: none; } #sidebar { width: 100%; float: none; } } |
彈性圖片
通過max-width: 100%和height: auto實現圖片的彈性化。
1 2 3 4 5 | img { max-width: 100%; height: auto; width: auto9; /* ie8 */} |
彈性內嵌元素(視頻)
通過width: 100%和height: auto實現內嵌元素的彈性化。
1 2 3 4 5 6 | .video embed, .video object, .video iframe { width: 100%; height: auto; } |
字號自動調整的問題
通過-webkit-text-size-adjust:none禁用iPhone中Safari的字號自動調整
1 2 3 | html { -webkit-text-size-adjust: none; } |
頁面寬度縮放的問題
1 | <metaname="viewport"content="width=device-width; initial-scale=1.0"> |