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

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：國際域名空間、虛擬空間、營銷軟件、網(wǎng)站建設(shè)、遠(yuǎn)安網(wǎng)站維護(hù)、網(wǎng)站推廣。

OK開始說正經(jīng)的了。在之前一篇譯文中，我們了解了響應(yīng)式Web設(shè)計的概念、組成要素以及基本的實現(xiàn)思路。今天繼續(xù)相關(guān)話題，我們將從前文介紹過的"彈性布局結(jié)構(gòu)"這方面出發(fā)，通過一個具體的實例來深入學(xué)習(xí)。

如今的屏幕分辨率，小至320px（iPhone），大到2560px甚至更高（大顯示器），變化范圍極大。除了使用傳統(tǒng)的臺式機(jī)，用戶會越來越多的通過手機(jī)、上網(wǎng)本、iPad一類的平板設(shè)備來瀏覽頁面。這種情況下，固定寬度的設(shè)計方案將會顯得越發(fā)不合理。頁面需要有更好的適應(yīng)性，其布局結(jié)構(gòu)要做到根據(jù)不同的設(shè)備及屏幕分辨率進(jìn)行響應(yīng)調(diào)整。接下來，我們將了解一下怎樣通過HTML5和CSS3 Media Queries（媒介查詢）相關(guān)技術(shù)來實現(xiàn)跨設(shè)備跨瀏覽器的響應(yīng)式Web設(shè)計方案。

范例效果預(yù)覽

首先，我們來看看本篇范例的最終效果演示。打開該頁面，拖拽瀏覽器邊框，將窗口慢慢縮小，同時觀察頁面結(jié)構(gòu)及元素布局是怎樣基于寬度變化而自動響應(yīng)調(diào)整的。

更多范例

我（原文作者）使用media query的方式設(shè)計了一些WordPress模板，比如Tisa、Elemin、Suco、iTheme2、Funki、Minblr和Wumblr等。

概述

我們將范例頁面的父級容器寬度設(shè)置為固定的980px，對于桌面瀏覽環(huán)境，該寬度適用于任何寬于1024像素的分辨率。我們通過media query來監(jiān)測那些寬度小于980px的設(shè)備分辨率，并將頁面的寬度設(shè)置由"固定"方式改為"液態(tài)"，布局元素的寬度隨著瀏覽器窗口的尺寸變化進(jìn)行調(diào)整。當(dāng)可視部分的寬度進(jìn)一步減小到650px以下時，主要內(nèi)容部分的容器寬度會增大至全屏，而側(cè)邊欄將被置于主內(nèi)容部分的下方，整個頁面變?yōu)閱螜诓季帧?/p>

HTML代碼

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

HTML5.js

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

CSS

HTML5塊級元素樣式

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

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

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

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

#pagewrap {
width: 980px;
margin: 0 auto;
}

#header {
height: 160px;
}

#content {
width: 600px;
float: left;
}

#sidebar {
width: 280px;
float: right;
}

#footer {
clear: both;
}

截至目前的效果演示

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

標(biāo)題名稱：通過CSS3MediaQuery實現(xiàn)響應(yīng)式Web設(shè)計
分享地址：http://weahome.cn/article/cgsscp.html