通過CSS3 Media Query實(shí)現(xiàn)響應(yīng)式Web設(shè)計(jì)
在之前一篇譯文中，我們了解了響應(yīng)式Web設(shè)計(jì)的概念、組成要素以及基本的實(shí)現(xiàn)思路。今天繼續(xù)相關(guān)話題，我們將從前文介紹過的“彈性布局結(jié)構(gòu)”這方面出發(fā)，通過一個(gè)具體的實(shí)例來深入學(xué)習(xí)。
如今的屏幕分辨率，小至320px(iPhone)，大到2560px甚至更高(大顯示器)，變化范圍極大。除了使用傳統(tǒng)的臺(tái)式機(jī)，用戶會(huì)越來越多的通過手機(jī)、上網(wǎng)本、iPad一類的平板設(shè)備來瀏覽頁面。這種情況下，固定寬度的設(shè)計(jì)方案將會(huì)顯得越發(fā)不合理。頁面需要有更好的適應(yīng)性，其布局結(jié)構(gòu)要做到根據(jù)不同的設(shè)備及屏幕分辨率進(jìn)行響應(yīng)調(diào)整。接下來，我們將了解一下怎樣通過HTML5和CSS3 Media Queries(媒介查詢)相關(guān)技術(shù)來實(shí)現(xiàn)跨設(shè)備跨瀏覽器的響應(yīng)式Web設(shè)計(jì)方案。
范例效果預(yù)覽
首先，我們來看看本篇范例的最終效果演示。打開該頁面，拖拽瀏覽器邊框，將窗口慢慢縮小，同時(shí)觀察頁面結(jié)構(gòu)及元素布局是怎樣基于寬度變化而自動(dòng)響應(yīng)調(diào)整的。
更多范例
我(原文作者)使用media query的方式設(shè)計(jì)了一些WordPress模板，比如Tisa、Elemin、Suco、iTheme2、Funki、Minblr和Wumblr等。
概述
我們將范例頁面的父級(jí)容器寬度設(shè)置為固定的980px，對(duì)于桌面瀏覽環(huán)境，該寬度適用于任何寬于1024像素的分辨率。我們通過media query來監(jiān)測(cè)那些寬度小于980px的設(shè)備分辨率，并將頁面的寬度設(shè)置由“固定”方式改為“液態(tài)”，布局元素的寬度隨著瀏覽器窗口的尺寸變化進(jìn)行調(diào)整。當(dāng)可視部分的寬度進(jìn)一步減小到650px以下時(shí)，主要內(nèi)容部分的容器寬度會(huì)增大至全屏，而側(cè)邊欄將被置于主內(nèi)容部分的下方，整個(gè)頁面變?yōu)閱螜诓季帧?/p>
HTML代碼
我們將把注意力集中在頁面的主要布局方面，并使用HTML5標(biāo)簽來更加語義化的實(shí)現(xiàn)這些結(jié)構(gòu)，包括頁頭、主要內(nèi)容部分、側(cè)邊欄和頁腳：
- <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
IE是永恒的話題;對(duì)于我們使用的HTML5標(biāo)簽，IE9之前的版本無法提供支持。目前的***解決方案仍是通過html5.js來幫助這些舊版本的IE瀏覽器創(chuàng)建HTML5元素節(jié)點(diǎn)。在我們的頁面HTML代碼中調(diào)用該JS文件：
- <!--[if lt IE 9]>
- <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
- <![endif]-->
CSS
HTML5塊級(jí)元素樣式
首先仍是瀏覽器兼容問題。雖然我們已經(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)允菍⒆⒁饬性诖髥栴}上。正如在前文“概述”中提到的，默認(rèn)情況下頁面容器的固定寬度為980像素，頁頭部分(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;
- }
截至目前的效果演示
目前我們只是初步完成了頁面結(jié)構(gòu)的HTML和默認(rèn)結(jié)構(gòu)樣式，當(dāng)然，并不包括那些與話題無關(guān)的細(xì)節(jié)實(shí)現(xiàn)問題。正如可以在目前的演示中看到的，由于還沒有做任何media query方面的工作，頁面還不能隨著瀏覽器尺寸的變化而改變布局。
#p#
CSS3 Media Query
終于開始說正事兒了。首先我們需要在頁面中調(diào)用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]-->
接下來，我們要?jiǎng)?chuàng)建CSS樣式表，并在頁面中調(diào)用：
- <link href="media-queries.css" rel="stylesheet" type="text/css">
當(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ì)將過小的字號(hào)放大，我們可以通過-webkit-text-size-adjust屬性進(jìn)行調(diào)整。
◆ 將main-nav中的字號(hào)設(shè)置為90%
彈性圖片
我們需要為圖片設(shè)置max-width: 100%和height: auto，來實(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%來代替：
- .video embed,
- .video object,
- .video iframe {
- width: 100%;
- height: auto;
- }
iPhone中的初始化縮放
默認(rèn)情況下，iPhone中的Safari瀏覽器會(huì)對(duì)頁面進(jìn)行自動(dòng)縮放，以適應(yīng)屏幕尺寸。我們可以使用以下的meta設(shè)置，將設(shè)備的默認(rèn)寬度作為頁面在Safari的可視部分寬度，并禁止初始化縮放。
- <meta name="viewport" content="width=device-width; initial-scale=1.0">
最終效果演示
該范例的最終演示正像我們?cè)诒疚拈_始時(shí)看到的那樣;另外記得，在條件允許的情況下，使用各種典型移動(dòng)設(shè)備(iPhone、iPad、Android、Blackberry等)來檢驗(yàn)頁面的移動(dòng)版本。
要點(diǎn)總結(jié)
Media Query JavaScript
對(duì)于那些尚不支持media query的瀏覽器，我們要在頁面中調(diào)用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
實(shí)現(xiàn)自適應(yīng)頁面設(shè)計(jì)的關(guān)鍵之一，就是使用CSS根據(jù)分辨率寬度的變化來調(diào)整頁面布局結(jié)構(gòu)。
- @media screen and (max-width: 560px) {
- #content {
- width: auto;
- float: none;
- }
- #sidebar {
- width: 100%;
- float: none;
- }
- }
彈性圖片
通過max-width: 100%和height: auto實(shí)現(xiàn)圖片的彈性化。
- img {
- max-width: 100%;
- height: auto;
- width: auto\9; /* ie8 */
- }
彈性內(nèi)嵌元素(視頻)
通過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)整的問題
通過-webkit-text-size-adjust:none禁用iPhone中Safari的字號(hào)自動(dòng)調(diào)整
- html {
- -webkit-text-size-adjust: none;
- }
頁面寬度縮放的問題
- <meta name="viewport" content="width=device-width; initial-scale=1.0">
原文：http://beforweb.com/node/7/page/0/1
【編輯推薦】
