您當前位置：首頁 > web前端 > htmlcss > CSS3 Media Queries，媒介設(shè)備查詢

CSS3 Media Queries，媒介設(shè)備查詢

來源：程序員人生發(fā)布時間：2013-11-24 16:16:09 閱讀次數(shù)：3491次

允許通過 media 屬性為不同媒介設(shè)備（如屏幕、打印機）指定專用樣式表，而 CSS3 通過 media queries 使得更為行之有效。你可以為媒介類型添加某些查詢條件用以檢測設(shè)備，并采用不同的樣式表。例如，你可以有一個大屏幕顯示器的專用樣式和一個移動設(shè)備的專用樣式。這將非常強大，因為它允許不同的設(shè)備使用不同的界面外觀，但并不改變你的文檔內(nèi)容。閱讀這篇文章來了解一下國外已經(jīng)良好應(yīng)用 media queries 的網(wǎng)站案例。

CSS3 Media Queries (演示稿)
點擊這個演示稿并且縮放的你瀏覽器窗口尺寸，觀察頁面元素的動態(tài)變化。

最大寬度

如果可視區(qū)域?qū)挾刃∮?600 像素，以下 CSS 將被應(yīng)用。

@media screen and (max-width: 600px) {
.class {
background: #ccc;
}
}

如果你想要引入獨立的樣式表，可以在 <head> 標簽對之間插入以下代碼行。

最小寬度

如果可視區(qū)域?qū)挾却笥?900 像素，以下 CSS 將被應(yīng)用。

@media screen and (min-width: 900px) {
.class {
background: #666;
}
}

多媒介查詢

你可以組合多個媒介類型查詢，如果可視區(qū)域?qū)挾冉橛?600 像素至 900 像素，以下代碼將被應(yīng)用。

@media screen and (min-width: 600px) and (max-width: 900px) {
.class {
background: #333;
}
}

設(shè)備寬度

如果設(shè)備最大寬度為 480 像素（如 iPhone），以下代碼將被應(yīng)用。注：最大設(shè)備寬度意味著設(shè)備的實際可視面積，最大寬度意味著可視區(qū)域面積。

@media screen and (max-device-width: 480px) {
.class {
background: #000;
}
}

iPhone 4 專用

以下代碼為 iPhone 4 專用。（案例：Thomas Maier）

iPad 專用

你也可以使用 media queries 來檢測 iPad 上橫向縱向坐標。（案例：Cloud Four）

Internet Explorer 的 Media Queries 解決方案
不幸的事，Internet Explorer 8 或更早的版本并不支持 media queries。你可以使用 JavaScript 來彌補這一缺陷。以下是幾個解決方案：

1、CSS Tricks – using jQuery to detect browser size
2、The Man in Blue – using Javascript (這篇文章寫于六年前)
3、jQuery Media Queries Plugin

案例站點

你必須在支持 media queries 的高級瀏覽器如 Firefox、Chrome、Safari 中瀏覽以下站點。看看隨著窗口尺寸改變時，這些頁面布局是如何響應(yīng)的。

Hicksdesign

大尺寸： 三欄式側(cè)邊欄
小尺寸： 兩欄式側(cè)邊欄（中間欄沉入左側(cè)欄）
更小尺寸： 一欄式側(cè)邊欄（右側(cè)欄移至 Logo 右方）
最小尺寸： 沒有側(cè)邊欄（Logo 和右側(cè)欄移至頂部，另一個側(cè)邊欄移至底部）

CSS3 Media Queries

Colly

根據(jù)瀏覽器可視區(qū)域的尺寸，布局在一欄式、兩欄式和四欄式之間切換。

CSS3 Media Queries

A List Apart

大尺寸：導(dǎo)航在頂部，一排圖片
中尺寸：導(dǎo)航在左側(cè)，三列圖片
小尺寸：導(dǎo)航在頂部，Logo 沒有背景圖片，三列圖片

CSS3 Media Queries

Tee Gallery

這個和上述 Colly 案例非常相似，但是不同之處在于 Tee Gallery 中的圖片會隨著窗口尺寸變化彈性地自適應(yīng)。這里的技巧是使用百分比寬度，而不使用固定像素寬度。

CSS3 Media Queries

總結(jié)

請記住：擁有優(yōu)化過的移動版樣式表并不意味著移動版網(wǎng)站的優(yōu)化。真正的移動設(shè)備優(yōu)化，圖片和標記語言也必須被縮減到最小，Media queries 目的是為設(shè)計表現(xiàn)，而不是優(yōu)化。

英文原稿：CSS3 Media Queries | WebDesignerWall
翻譯整理：CSS3 Media Queries，媒介設(shè)備查詢 | 芒果

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學(xué)習(xí)有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

上一篇 Ubuntu server 上建立 nfs 服務(wù)器的步驟

下一篇 詳解：xp系統(tǒng)同時安裝sql2000和sql2005

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關(guān)注

欄目熱點

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

CSS3 Media Queries，媒介設(shè)備查詢