HTML代碼

　　我們將把注意力集中在頁(yè)面的主要布局方面，并使用HTML5標(biāo)簽來(lái)更加語(yǔ)義化的實(shí)現(xiàn)這些結(jié)構(gòu)，包括頁(yè)頭、主要內(nèi)容部分、側(cè)邊欄和頁(yè)腳：

　　Demo

　　Site Description

　　Home

　　blog post

　　widget

　　footer

　　HTML5.js

　　IE是永恒的話題;對(duì)于我們使用的HTML5標(biāo)簽，IE9之前的版本無(wú)法提供支持。目前的最佳解決方案仍是通過(guò)html5.js來(lái)幫助這些舊版本的IE瀏覽器創(chuàng)建HTML5元素節(jié)點(diǎn)。在我們的頁(yè)面HTML代碼中調(diào)用該JS文件：

　　CSS

　　HTML5塊級(jí)元素樣式

　　首先仍是瀏覽器兼容問(wèn)題。雖然我們已經(jīng)可以在低版本的IE中創(chuàng)建HTML5元素節(jié)點(diǎn)，但還是需要在樣式方面做些工作，將這些"新"元素聲明為塊級(jí)：

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

　　主要結(jié)構(gòu)的CSS

　　忽略細(xì)節(jié)，我們?nèi)允菍⒆⒁饬性诖髥?wèn)題上。正如在前文"概述"中提到的，默認(rèn)情況下頁(yè)面容器的固定寬度為980像素，頁(yè)頭部分(header)的固定高度為160像素;主要內(nèi)容部分(content)的寬度為600像素，左浮動(dòng);側(cè)邊欄(sidebar)右浮動(dòng)，寬度為280像素。

　　#pagewrap {width: 980px;margin: 0 auto;}#header {height: 160px;}#content {width: 600px;float: left;}

　　#sidebar {width: 280px;float: right;}#footer {clear: both;}

　　截至目前的效果演示

　　目前我們只是初步完成了頁(yè)面結(jié)構(gòu)的HTML和默認(rèn)結(jié)構(gòu)樣式，當(dāng)然，并不包括那些與話題無(wú)關(guān)的細(xì)節(jié)實(shí)現(xiàn)問(wèn)題。正如可以在目前的演示中看到的，由于還沒(méi)有做任何media query方面的工作，頁(yè)面還不能隨著瀏覽器尺寸的變化而改變布局。

　　CSS3 Media Query

　　終于開(kāi)始說(shuō)正事兒了。首先我們需要在頁(yè)面中調(diào)用css3-mediaqueries.js文件，來(lái)幫助IE8或是之前的版本支持CSS3 media queries：

　　接下來(lái)，我們要?jiǎng)?chuàng)建CSS樣式表，并在頁(yè)面中調(diào)用：

　　當(dāng)瀏覽器可視部分寬度大于650px小于980px時(shí)(液態(tài)布局)

　　將pagewrap的寬度設(shè)置為95%

　　將content的寬度設(shè)置為60%

　　將sidebar的寬度設(shè)置為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;}

　　當(dāng)瀏覽器可視部分寬度小于650px時(shí)(單欄布局)

　　將header的高度設(shè)置為auto

　　將searchform絕對(duì)定位在top 5px的位置

　　將main-nav、site-logo、site-description的定位設(shè)置為static

　　將content的寬度設(shè)置為auto(主要內(nèi)容部分的寬度將擴(kuò)展至滿屏)，并取消float設(shè)置

　　將sidebar的寬度設(shè)置為100%，并取消float設(shè)置

　　@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;}}

　　當(dāng)瀏覽器可視部分寬度小于480px時(shí)

　　480px也就是iPhone橫屏?xí)r的寬度。當(dāng)可視部分的寬度小于該數(shù)值時(shí)，我們需要做以下調(diào)整：

　　禁用html節(jié)點(diǎn)的字號(hào)自動(dòng)調(diào)整。默認(rèn)情況下，iPhone會(huì)將過(guò)小的字號(hào)放大，我們可以通過(guò)-webkit-text-size-adjust屬性進(jìn)行調(diào)整。

　　將main-nav中的字號(hào)設(shè)置為90%

　　@media screen and (max-width: 480px) {

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

　　#main-nav a {font-size: 90%;padding: 10px 8px;　}　}

　　彈性圖片

　　我們需要為圖片設(shè)置max-width:100%和height:auto，來(lái)實(shí)現(xiàn)其彈性化。對(duì)于IE，仍然需要一點(diǎn)額外的工作：

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

　　彈性內(nèi)嵌視頻

　　同樣的，對(duì)于視頻，我們也需要做max-width： 100%的設(shè)置;但是Safari對(duì)embed的該屬性支持不是很給力，所以我們以width： 100%來(lái)代替：

　　.video embed,

　　.video object,

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

　　iPhone中的初始化縮放

　　默認(rèn)情況下，iPhone中的Safari瀏覽器會(huì)對(duì)頁(yè)面進(jìn)行自動(dòng)縮放，以適應(yīng)屏幕尺寸。我們可以使用以下的meta設(shè)置，將設(shè)備的默認(rèn)寬度作為頁(yè)面在Safari的可視部分寬度，并禁止初始化縮放。

　　最終效果演示

　　該范例的最終演示正像我們?cè)诒疚拈_(kāi)始時(shí)看到的那樣;另外記得，在條件允許的情況下，使用各種典型移動(dòng)設(shè)備(iPhone、iPad、Android、Blackberry等)來(lái)檢驗(yàn)頁(yè)面的移動(dòng)版本。

　　要點(diǎn)總結(jié)

　　Media Query JavaScript

　　對(duì)于那些尚不支持media query的瀏覽器，我們要在頁(yè)面中調(diào)用css3-mediaqueries.js

　　CSS Media Queries

　　實(shí)現(xiàn)自適應(yīng)頁(yè)面設(shè)計(jì)的關(guān)鍵之一，就是使用CSS根據(jù)分辨率寬度的變化來(lái)調(diào)整頁(yè)面布局結(jié)構(gòu)。

　　@media screen and (max-width: 560px) {

　　#content {width: auto;float: none;}

　　#sidebar {width: 100%;float: none;}}

　　彈性圖片

　　通過(guò)max-width:100%和height:auto實(shí)現(xiàn)圖片的彈性化。

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

　　彈性內(nèi)嵌元素(視頻)

　　通過(guò)width:100%和height:auto實(shí)現(xiàn)內(nèi)嵌元素的彈性化。

　　.video embed,

　　.video object,

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

　　字號(hào)自動(dòng)調(diào)整的問(wèn)題

　　通過(guò)-webkit-text-size-adjust:none禁用iPhone中Safari的字號(hào)自動(dòng)調(diào)整

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

　　響應(yīng)式Web網(wǎng)站設(shè)計(jì)知識(shí)分享非常給力，值得每一個(gè)人關(guān)注!