精品一区二区在线观看,欧美乱人伦电影在线观看,国产成人亚洲综合小说区

【CSS3 入門教程系列】CSS3 Media Queries 實現(xiàn)響應(yīng)式設(shè)計

2014.11.08

　　在 CSS2 中，你可以為不同的媒介設(shè)備（如屏幕、打印機）指定專用的樣式表，而現(xiàn)在借助 CSS3 的 Media Queries 特性，可以更為有效的實現(xiàn)這個功能。你可以為媒介類型添加某些條件，檢測設(shè)備并采用不同的樣式表。

　　例如，你可以把用于大屏幕上顯示的樣式和用于移動設(shè)備的專用樣式放在一個樣式文檔中，這樣，在不改變文檔內(nèi)容的情況下，不同的設(shè)備可以呈現(xiàn)不同的界面外觀。閱讀這篇文章學(xué)習(xí) CSS3 Media Queries 的基本功能和國外使用 CSS3 的 Media Queries 特性的優(yōu)秀網(wǎng)站案例。

CSS3 Media Queries

看下這個在線演示，調(diào)整你的瀏覽器窗口尺寸，看看它的變化。

Max Width

下面的樣式會在可視區(qū)域的寬度小于 600px 的時候被應(yīng)用。

1

2

3

4

5

@media screen and (max-width: 600px) {

.class {

background: #ccc;

}

如果你想鏈接到一個單獨的樣式表，把下面的代碼放在<head>標(biāo)簽里。

1	`<link rel="stylesheet"` `media="screen and (max-width: 600px)"` `href="small.css"` `/>`

Min Width

下面的樣式會在可視區(qū)域的寬度大于 900px 的時候被應(yīng)用。

1

2

3

4

5

@media screen and (min-width: 900px) {

.class {

background: #666;

}

Multiple Media Queries

你還可以使用過個匹配條件，下面的樣式會在可視區(qū)域的寬度在 600px 和 900px 之間的時候被應(yīng)用。

1

2

3

4

5

@media screen and (min-width: 600px) and (max-width: 900px) {

.class {

background: #333;

}

Device Width

下面的樣式會在 max-device-width 是 480px 的設(shè)備上觸發(fā)。（提示：max-device-width 是設(shè)備的實際分辨率，而 max-width 指的是可視區(qū)域分辨率。）

1

2

3

4

5

@media screen and (max-device-width: 480px) {

.class {

background: #000;

}

For iPhone 4

下面的樣式是為 iPhone 4 專門寫的 (作者: Thomas Maier)。

1	`<link rel="stylesheet"` `media="only screen and (-webkit-min-device-pixel-ratio: 2)"` `type="text/css"` `href="iphone4.css"` `/>`

For iPad

你還可以使用 media query 在 iPad 上檢測方向(portrait or landscapse) (作者: Cloud Four)。

1 2	`<link rel="stylesheet"` `media="all and (orientation:portrait)"` `href="portrait.css">` `<link rel="stylesheet"` `media="all and (orientation:landscape)"` `href="landscape.css">`

Media Queries for IE

遺憾是的，IE8 及更老版本的瀏覽器不支持 CSS3 Media Queries，不過可以使用 Javascript 彌補，下面是一些解決方案：

CSS Tricks - using jQuery to detect browser size
The Man in Blue - using Javascript
jQuery Media Queries Plugin

附：CSS3 Media Queries 瀏覽器兼容性表

CSS3 Media Queries 應(yīng)用案例

需要在下面這些支持 Media Queries 特性的瀏覽器中瀏覽：IE9+, Firefox, Chrome 和 Safari。瀏覽每個站點，看頁面布局是如何響應(yīng)瀏覽器窗口變化的。

Hicksdesign

大尺寸: 3 列側(cè)欄
較小尺寸: 2 列表側(cè)欄 (中間一列下降到左邊的列)
更小尺寸: 1 列側(cè)欄 (右列上移到標(biāo)志下方)
最小尺寸: 沒有側(cè)欄 (LOGO及右列上移，其他側(cè)邊欄列移到底部)

Colly

頁面的布局會根據(jù)瀏覽器的尺寸在1列，2列和4列之間切換。

A List Apart

大尺寸: 導(dǎo)航在頂部，圖片只有一行。
中等尺寸: 導(dǎo)航在左邊，圖片變成3列。
小尺寸: 導(dǎo)航在頂部，LOGO沒有了背景圖片，圖片變成3列。

Tee Gallery

這個和前面的 Colly 很像，不過這個案例中的圖片也會隨著布局的變化而變化。技巧是使用百分比設(shè)置元素的寬度。

總結(jié)

　　請記?。簽橐苿釉O(shè)備優(yōu)化了樣式表并不意味著你的網(wǎng)站就適合在移動設(shè)備顯示了。要做到真正的移動設(shè)備優(yōu)化，要削減圖像大小、標(biāo)簽數(shù)量和加載的資源尺寸等等。CSS3 Media Queries 是用于設(shè)計的呈現(xiàn)，而不是優(yōu)化。

【參考文章】

* 《What are CSS Media Querie》

* 《WebDesignWall:CSS3 Media Queries》

* 《Can I use CSS3 Media Queries?》