?
范例效果預(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)閱螜诓季帧?
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.js
IE是永恒的話題；對于我們使用的HTML5標(biāo)簽，IE9之前的版本無法提供支持。目前的最佳解決方案仍是通過html5.js來幫助這些舊版本的IE瀏覽器創(chuàng)建HTML5元素節(jié)點(diǎn)。在我們的頁面HTML代碼中調(diào)用該JS文件：
<!--[if lt IE 9]>
<script src="<a target="_blank" class="ext" ></script></a><span class="ext"></span>
<![endif]-->
?
?
CSS
HTML5塊級元素樣式
首先仍是瀏覽器兼容問題。雖然我們已經(jīng)可以在低版本的IE中創(chuàng)建HTML5元素節(jié)點(diǎn)，但還是需要在樣式方面做些工作，將這些“新”元素聲明為塊級：
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é)實(shí)現(xiàn)問題。正如可以在 目前的演示 中看到的，由于還沒有做任何media query方面的工作，頁面還不能隨著瀏覽器尺寸的變化而改變布局 。
CSS3 Media Query
終于開始說正事兒了。首先我們需要在頁面中調(diào)用 css3-mediaqueries.js 文件，來幫助IE8或是之前的版本支持CSS3 media queries：
<!--[if lt IE 9]>
<script src="<a target="_blank" class="ext" >http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.j...</a><span class="ext"></span>
<![endif]-->
?
?
接下來，我們要創(chuàng)建CSS樣式表，并在頁面中調(diào)用：
<link href="media-queries.css" rel="stylesheet" type="text/css">
?
?
當(dāng)瀏覽器可視部分寬度大于650px小于980px時(液態(tài)布局)
- 將pagewrap的寬度設(shè)置為95%
- 將content的寬度設(shè)置為60%
- 將sidebar的寬度設(shè)置為30%
當(dāng)瀏覽器可視部分寬度小于650px時(單欄布局)
- 將header的高度設(shè)置為auto
- 將searchform絕對定位在top 5px的位置
- 將main-nav、site-logo、site-description的定位設(shè)置為static
- 將content的寬度設(shè)置為auto(主要內(nèi)容部分的寬度將擴(kuò)展至滿屏)，并取消float設(shè)置
- 將sidebar的寬度設(shè)置為100%，并取消float設(shè)置
當(dāng)瀏覽器可視部分寬度小于480px時
480px也就是iPhone橫屏?xí)r的寬度。當(dāng)可視部分的寬度小于該數(shù)值時，我們需要做以下調(diào)整：
- 禁用html節(jié)點(diǎn)的字號自動調(diào)整。默認(rèn)情況下，iPhone會將過小的字號放大，我們可以通過-webkit-text-size-adjust屬性進(jìn)行調(diào)整。
- 將main-nav中的字號設(shè)置為90%
彈性圖片
我們需要為圖片設(shè)置max-width: 100%和height: auto，來實(shí)現(xiàn)其彈性化。對于IE，仍然需要一點(diǎn)額外的工作：
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
?
彈性內(nèi)嵌視頻
同樣的，對于視頻，我們也需要做max-width: 100%的設(shè)置；但是Safari對embed的該屬性支持不是很給力，所以我們以width: 100%來代替：
.video embed,
.video object,
.video iframe {
width: 100%;
height: auto;
}
?
iPhone中的初始化縮放
默認(rèn)情況下，iPhone中的Safari瀏覽器會對頁面進(jìn)行自動縮放，以適應(yīng)屏幕尺寸。我們可以使用以下的meta設(shè)置，將設(shè)備的默認(rèn)寬度作為頁面在Safari的可視部分寬度，并禁止初始化縮放。
<meta name="viewport" content="width=device-width; initial-scale=1.0">
?
最終效果演示
該范例的最終演示正像我們在本文開始時看到的那樣；另外記得，在條件允許的情況下，使用各種典型移動設(shè)備(iPhone、iPad、Android、Blackberry等)來檢驗(yàn)頁面的移動版本 。
?
要點(diǎn)總結(jié)
Media Query JavaScript
對于那些尚不支持media query的瀏覽器，我們要在頁面中調(diào)用css3-mediaqueries.js
<!--[if lt IE 9]>
<script src="<a target="_blank" class="ext" >http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.j...</a><span class="ext"></span>
<![endif]-->
?
CSS Media Queries
實(shí)現(xiàn)自適應(yīng)頁面設(shè)計的關(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;
}
?
字號自動調(diào)整的問題
通過-webkit-text-size-adjust:none禁用iPhone中Safari的字號自動調(diào)整
html {
-webkit-text-size-adjust: none;
}
?
頁面寬度縮放的問題
CSS3 Media Query實(shí)現(xiàn)響應(yīng)式Web設(shè)計(針對不同移動設(shè)備寬度)
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯(lián)系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長非常感激您！手機(jī)微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
