響應(yīng)式web設(shè)計(jì)(Responsive web design)三步曲

集微筆記 2014-08-05

展開(kāi)全文

響應(yīng)式web設(shè)計(jì)無(wú)可厚非現(xiàn)在是個(gè)很時(shí)髦的技術(shù)。如果你仍然對(duì)響應(yīng)式設(shè)計(jì)不熟悉的話,，看下我之前發(fā)表過(guò)的響應(yīng)式站點(diǎn)列表,。對(duì)于新手，響應(yīng)式設(shè)計(jì)可能聽(tīng)起來(lái)有一點(diǎn)復(fù)雜,，但是它實(shí)際上比你想的要簡(jiǎn)單,。為了幫助你快速的上手響應(yīng)式設(shè)計(jì),，我寫(xiě)了一個(gè)快速上手教程。我保證你通過(guò)三步就可以學(xué)會(huì)響應(yīng)式設(shè)計(jì)的基本邏輯和媒體查詢（media query）（假設(shè)你有基本的CSS知識(shí)）,。

第一步　 Meta標(biāo)簽（看demo）

大部分移動(dòng)瀏覽器會(huì)把HTML頁(yè)面縮放成較寬的viewport的寬度,，這樣內(nèi)容就可以屏幕上正確的展示了。你可以使用viewport這個(gè)meta標(biāo)簽來(lái)重置這個(gè)行為,。下面的viewport標(biāo)簽告訴瀏覽器使用設(shè)備寬度（device-width）做為viewport的寬度,，并且禁用初始的縮放比例。在<head>中加入這個(gè)meta標(biāo)簽,。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Internet Explorer 8或者更老的瀏覽器不支持媒體查詢,。你可以使用media-queries.js或者respond.js來(lái)在IE中添加對(duì)媒體查詢的支持。

<!--[if lt IE 9]> 
    <script src="http://css3-mediaqueries-js./svn/trunk/css3-mediaqueries.js"></script> 
<![endif]-->

第二步　HTML結(jié)構(gòu)

在這個(gè)例子中,，我擁有一個(gè)由頭部,，內(nèi)容容器，側(cè)邊欄,，以及一個(gè)底部構(gòu)成的基本的頁(yè)面布局,。頭部擁有一個(gè)固定的180px高度，內(nèi)容容器600px寬,，然后側(cè)邊欄是300px寬,。

第三步　媒體查詢（Media Query）

CSS3媒體查詢是進(jìn)行響應(yīng)式設(shè)計(jì)的戲法。它跟寫(xiě)if條件一樣,，來(lái)告訴瀏覽器對(duì)于特定的viewport寬度如何渲染頁(yè)面,。

下面的規(guī)則集在當(dāng)viewport寬度小于等于980px的時(shí)候生效?；旧?，我把所有容器的寬度從像素值改成了百分比值，這樣容器就會(huì)變得具有流動(dòng)性(fluid),。

然后對(duì)于寬度小于或等于700px的viewport,，指定#content和#sidebar為自動(dòng)寬度，并且移除浮動(dòng),，所以他們可以以全寬度進(jìn)行展示,。

對(duì)于寬度小于等于480px（移動(dòng)設(shè)備屏幕）的，重置#header的高度為auto,，修改h1的字體大小為24px,，并且隱藏#sidebar。

你可以想寫(xiě)多少媒體查詢就寫(xiě)多少,。我在demo中只展示了三個(gè)媒體查詢,。媒體查詢的目的是對(duì)于指定的viewport寬度可以通過(guò)應(yīng)用不同的CSS規(guī)則來(lái)獲得不同的布局。媒體查詢可以在同一個(gè)樣式表中或者在一個(gè)單獨(dú)的文件中,。

總結(jié)

這個(gè)教程打算告訴你響應(yīng)設(shè)計(jì)的基礎(chǔ)知識(shí),。如果你想要看更深入的教程,，看看我上一篇教程：《利用媒體查詢進(jìn)行響應(yīng)式設(shè)計(jì)》。

作者: JeremyWei | 可以轉(zhuǎn)載, 但必須以超鏈接形式標(biāo)明文章原始出處和作者信息及版權(quán)聲明

網(wǎng)址: http:///responsive-design-in-3-steps.html

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間,，所有內(nèi)容均由用戶發(fā)布,，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式,、誘導(dǎo)購(gòu)買(mǎi)等信息,，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,，請(qǐng)點(diǎn)擊一鍵舉報(bào),。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來(lái)自：集微筆記 > 《Web開(kāi)發(fā)》

舉報(bào)/認(rèn)領(lǐng)