隨著高科技的發(fā)展，現(xiàn)在我們?yōu)g覽網(wǎng)頁(yè)不在局限于PC機(jī)上了，用戶可使用上網(wǎng)的設(shè)備是越來(lái)越多的品種：手機(jī)、小筆記本、iPad、Playbook，以及PC機(jī)，而且PC機(jī)的顯展大小各不一致。這樣一來(lái)不同的屏幕分辨率范圍就產(chǎn)生了：320px至2560px不等。換句話說(shuō)，以前我們那種固定布局的設(shè)計(jì)所受的局限性就越來(lái)越大了。為了能讓我們制作出來(lái)的Web頁(yè)面能適應(yīng)這些設(shè)置，就需要一個(gè)適應(yīng)性的設(shè)計(jì)，需要能自動(dòng)調(diào)整，以適應(yīng)所有顯示分辨率和設(shè)備的布局

目標(biāo)效果

在開(kāi)始之前，我們先來(lái)看一個(gè)DEMO效果，大家慢慢縮小你的顯屏，你將會(huì)看到不同的布局效果來(lái)適應(yīng)你的顯屏大小

概述

對(duì)于顯屏大于1024px寬度來(lái)說(shuō)，我們常常是將頁(yè)面的容器設(shè)置為980px。其實(shí)我們可以使用CSS3的Media Queries來(lái)檢查瀏覽器可視窗口的大小。當(dāng)顯屏的可視窗口小于980px時(shí)，我們布局不在采用固定寬度而將采用流體寬度布局來(lái)替代；如果顯屏可視窗口的寬度小于650px時(shí)，我們主內(nèi)容寬度和邊欄寬度都將變成全屏，并一列顯示出來(lái)

1. html

2. css

接下來(lái)我們主要來(lái)看一下布局上的主要樣式，細(xì)節(jié)大家回頭看文件慢慢品味。在這里我們?cè)陧?yè)面的容器“div#pagetwrap”設(shè)置了一個(gè)固定寬度“980px”，并且讓他居中顯示；在“div#header”為頁(yè)頭設(shè)置了一個(gè)固定高度“160px”，并且將主內(nèi)容“div#content”給了一個(gè)“600px”的寬度左浮動(dòng)，邊欄“div#sidebar”寬度設(shè)置為“280px”，并且將其設(shè)置為一個(gè)右浮動(dòng)。主要代碼如下所示

這樣的DEMO效果是:不管怎么樣縮放瀏覽器，寬度都是定死的980px，因?yàn)榈竭@里我們還沒(méi)有使用到css3 Media query

3. 下面我們開(kāi)始導(dǎo)入css3 media query：

3.1 導(dǎo)入Media Queries的JavaScript腳本

Media Queries是CSS3的一個(gè)屬性，那么他在IE6-8下，我不說(shuō)大家都懂的，為了解決能在IE6-8下運(yùn)行，就需要導(dǎo)入一個(gè)css3-mediaqueries.js的javaScript的腳本文件

3.2 導(dǎo)入Media Queries CSS樣式文件

3.3 顯屏可視化窗口小于980px（流體布局）

前面也說(shuō)過(guò)當(dāng)顯屏可視化窗口小于980px時(shí)，我們將使用流體布局來(lái)替代固定布局。那么將在流體布局中使用下面幾個(gè)規(guī)則

- div#pagewrap”重設(shè)寬度為95%

- div#content”重設(shè)寬度為60%

- div#sidebar”重設(shè)寬度為30%

請(qǐng)注意此時(shí)僅僅是將固定布局中的固定寬度替換成了百分比寬度，而原來(lái)固定寬度中的左右浮動(dòng)仍然是存在的

3.4 顯屏窗口小于650px使用一列布局

上面我們實(shí)現(xiàn)了兩種效果，接下來(lái)我們來(lái)看顯屏可視化窗口小于650px時(shí)，將頁(yè)面的布局改成一列布局

- 頁(yè)頭：將頁(yè)面頭部的固定高度設(shè)置為自動(dòng)(取消了原來(lái)的定高)

- searchform重新改變定位位置

- 主菜單的position重為static

- logo和網(wǎng)站口號(hào)也將position改回static

- 主內(nèi)容的寬度設(shè)置為auto，并取消浮動(dòng)

- sidebar的寬度設(shè)置為100%，并取消浮動(dòng)

3.5 顯屏可視化窗口小于480px（智能手機(jī)布局）

- HTML:禁用文字大小調(diào)整。默認(rèn)情況之下，iPhone的文字大小是可以縮放的，我們可以在html加上一個(gè)“-webkit-text-size-adjust: none;”來(lái)禁止其縮放

- 主菜單的字體大小重置為90％

3.6 靈活的縮放圖片

這里涉及到一個(gè)圖片縮放的問(wèn)題，也就是說(shuō)圖片也要能跟隨你的顯屏大小，成比例的縮放。那么實(shí)現(xiàn)這樣的效果方法還是很簡(jiǎn)單的，你只要在你的img標(biāo)簽中加入

由于max-width在IE的某些版本中無(wú)法識(shí)別，為了兼容這些瀏覽器，可以考慮這樣使用

3.7 靈活的嵌入式視頻

為了使嵌入式的視頻靈活，我們也可以根據(jù)上面的方法來(lái)使用，但對(duì)于embed元素在safari下的不支持max-width屬性，那么我們可以改用下面的方法來(lái)替代

注意：

可適應(yīng)圖片

為了讓你的圖片也能隨著顯屏大小改變其顯示比例，不至于破壞你的布局，你需要給圖片應(yīng)用上可縮放的代碼

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的CSS之Responsive设计和CSS3 Media Queries的结合的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。