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

目標(biāo)效果

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

概述

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

1. html

2. css

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

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

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

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

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

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

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

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

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

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

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

請注意此時僅僅是將固定布局中的固定寬度替換成了百分比寬度，而原來固定寬度中的左右浮動仍然是存在的

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

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

- 頁頭：將頁面頭部的固定高度設(shè)置為自動(取消了原來的定高)

- searchform重新改變定位位置

- 主菜單的position重為static

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

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

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

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

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

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

3.6 靈活的縮放圖片

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

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

3.7 靈活的嵌入式視頻

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

注意：

可適應(yīng)圖片

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

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

總結(jié)

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

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