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

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

OK開始說正經(jīng)的了。在之前一篇譯文中，我們了解了響應(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.js

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方面的工作，頁面還不能隨著瀏覽器尺寸的變化而改變布局。

名稱欄目：通過CSS3MediaQuery實(shí)現(xiàn)響應(yīng)式Web設(shè)計(jì)
當(dāng)前地址：http://www.rwnh.cn/article28/cgsscp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、虛擬主機(jī)、定制網(wǎng)站、品牌網(wǎng)站制作、全網(wǎng)營銷推廣、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)