建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
通過CSS3MediaQuery實現(xiàn)響應(yīng)式Web設(shè)計
十一長假已然過去了一大半。今天倒真是晴朗的不行，向窗外望去幾乎可以看到陽光穿過涼爽的空氣一縷縷灑落下來的樣子。自從不再是學(xué)生，對每年的幾次長假就無比珍惜，想方設(shè)法讓每一天都盡量過的飽滿一些；夜里閉上眼，滿腦子就都是Drupal、博客、咖啡、使命召喚、南方公園。..也許需要出門走一走了。
OK開始說正經(jīng)的了。在之前一篇譯文中，我們了解了響應(yīng)式Web設(shè)計的概念、組成要素以及基本的實現(xiàn)思路。今天繼續(xù)相關(guān)話題，我們將從前文介紹過的"彈性布局結(jié)構(gòu)"這方面出發(fā)，通過一個具體的實例來深入學(xué)習(xí)。
如今的屏幕分辨率，小至320px（iPhone），大到2560px甚至更高（大顯示器），變化范圍極大。除了使用傳統(tǒng)的臺式機，用戶會越來越多的通過手機、上網(wǎng)本、iPad一類的平板設(shè)備來瀏覽頁面。這種情況下，固定寬度的設(shè)計方案將會顯得越發(fā)不合理。頁面需要有更好的適應(yīng)性，其布局結(jié)構(gòu)要做到根據(jù)不同的設(shè)備及屏幕分辨率進行響應(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)"，布局元素的寬度隨著瀏覽器窗口的尺寸變化進行調(diào)整。當(dāng)可視部分的寬度進一步減小到650px以下時，主要內(nèi)容部分的容器寬度會增大至全屏，而側(cè)邊欄將被置于主內(nèi)容部分的下方，整個頁面變?yōu)閱螜诓季帧?/p>
HTML代碼
我們將把注意力集中在頁面的主要布局方面，并使用HTML5標簽來更加語義化的實現(xiàn)這些結(jié)構(gòu)，包括頁頭、主要內(nèi)容部分、側(cè)邊欄和頁腳：
Demo
Site Description
HTML5.js
IE是永恒的話題；對于我們使用的HTML5標簽，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
忽略細節(jié)，我們?nèi)允菍⒆⒁饬性诖髥栴}上。正如在前文"概述"中提到的，默認情況下頁面容器的固定寬度為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和默認結(jié)構(gòu)樣式，當(dāng)然，并不包括那些與話題無關(guān)的細節(jié)實現(xiàn)問題。正如可以在目前的演示中看到的，由于還沒有做任何media query方面的工作，頁面還不能隨著瀏覽器尺寸的變化而改變布局。
本文名稱：通過CSS3MediaQuery實現(xiàn)響應(yīng)式Web設(shè)計
網(wǎng)站鏈接：http://ef60e0e.cn/article/cgsscp.html
