!!!!通過CSS3 Media Query實(shí)現(xiàn)響應(yīng)式Web設(shè)計(jì)
如今的屏幕分辨率，小至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)閱螜诓季帧?div style="height:15px;">
HTML代碼
我們將把注意力集中在頁面的主要布局方面，并使用HTML5標(biāo)簽來更加語義化的實(shí)現(xiàn)這些結(jié)構(gòu)，包括頁頭、主要內(nèi)容部分、側(cè)邊欄和頁腳：
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
32
33
34
<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.js
IE是永恒的話題；對(duì)于我們使用的HTML5標(biāo)簽，IE9之前的版本無法提供支持。目前的最佳解決方案仍是通過html5.js來幫助這些舊版本的IE瀏覽器創(chuàng)建HTML5元素節(jié)點(diǎn)。在我們的頁面HTML代碼中調(diào)用該JS文件：
1
2
3
<!--[if lt IE 9]>
<script src="
<![endif]-->
CSS
HTML5塊級(jí)元素樣式
首先仍是瀏覽器兼容問題。雖然我們已經(jīng)可以在低版本的IE中創(chuàng)建HTML5元素節(jié)點(diǎn)，但還是需要在樣式方面做些工作，將這些“新”元素聲明為塊級(jí)：
1
2
3
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像素。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
#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方面的工作，頁面還不能隨著瀏覽器尺寸的變化而改變布局
。
CSS3 Media Query
終于開始說正事兒了。首先我們需要在頁面中調(diào)用
css3-mediaqueries.js 文件，來幫助IE8或是之前的版本支持CSS3 media queries：
1
2
3
<!--[if lt IE 9]>
<script src="
<![endif]-->
接下來，我們要?jiǎng)?chuàng)建CSS樣式表，并在頁面中調(diào)用：
1
<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%
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@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è)置
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
32
33
34
35
36
37
38
39
@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%
1
2
3
4
5
6
7
8
9
10
11
12
@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，來實(shí)現(xiàn)其彈性化。對(duì)于IE，仍然需要一點(diǎn)額外的工作：
1
2
3
4
5
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
彈性內(nèi)嵌視頻
同樣的，對(duì)于視頻，我們也需要做max-width: 100%的設(shè)置；但是Safari對(duì)embed的該屬性支持不是很給力，所以我們以width: 100%來代替：
1
2
3
4
5
6
.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的可視部分寬度，并禁止初始化縮放。
1
<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
1
2
3
<!--[if lt IE 9]>
<script src="
<![endif]-->
