CSS3 Media Queries媒體查詢

響應式設計能夠适應各種螢幕或者裝置展現頁面（在不同的裝置，頁面展現風格可能會有不同）。

解決了各種規格裝置給程式員帶來的挑戰，讓網頁無論是在傳統的電腦，平闆電腦或者手機上都能正常展示，下面對媒體查詢做一下介紹。 

一.CSS2中的媒體查詢:

css2中也有媒體查詢的應用，不過比較簡單，代碼如下：

[HTML] 純文字檢視 複制代碼

1 2 3

< link href = "css/reset.css" rel = "stylesheet" type = "text/css" media = "screen" /> < link href = "css/style.css" rel = "stylesheet" type = "text/css" media = "all" /> < link href = "css/print.css" rel = "stylesheet" type = "text/css" media = "print" />

上面的代碼分别規定三個css檔案分别用于顯示器、所有類型裝置和列印機。

二.媒體查詢使用方式:

媒體查詢的使用方式多種多樣，基本适合css使用方式一一對應的，羅列如下:

link方式引入:

[HTML] 純文字檢視 複制代碼

1	< link href = "css/reset.css" rel = "stylesheet" type = "text/css" media = "screen" />

xml方式引入:

[HTML] 純文字檢視 複制代碼

1	<? xml-stylesheet rel = "stylesheet" media = "screen" href = "css/style.css" />

@import方式引入:

[CSS] 純文字檢視 複制代碼

1	@import url ( "css/reset.css" ) screen ;

css代碼中使用:

[CSS] 純文字檢視 複制代碼

1 2 3 4 5

@media screen { 選擇器{ 屬性：屬性值； } }

style标簽上使用:

[HTML] 純文字檢視 複制代碼

1 2 3

< style type = "text/css" media = "screen" > </ style >

三.媒體查詢規則:

css2中的媒體查詢非常的簡單，僅僅能夠區分媒體類型。

css3對媒體查詢進行了擴充，不但可以依據媒體的類型，且還可以依據媒體的相關屬性。

看如下代碼執行個體:

[HTML] 純文字檢視 複制代碼

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

當頁寬度小于或等于600px且應用于螢幕上時，就會調用softwhy.css。

查詢規則：

包含一個媒體類型，後跟一個或多個檢查特定條件（如最小的螢幕寬度）的表達式。

雖然使用方式不同，定義媒體查詢的方式也有所不同，比如media屬性方式和@media方式，但是規則都是一樣的。

（1）.簡單代碼:

[CSS] 純文字檢視 複制代碼

1 2 3

@media all and ( min-width : 800px ) { }

所有最小水準螢幕寬度為800px的螢幕應用指定的css代碼。

特别說明：如果媒體類型是all，all可以省略，all後面的and也可以省略，簡寫如下:

[CSS] 純文字檢視 複制代碼

1 2 3

@media ( min-width : 800px ) { }

（2）.複雜的查詢代碼：

[CSS] 純文字檢視 複制代碼

1 2 3

@media ( min-width : 800px ) and ( max-width : 1200px ) { }

（3）.and 關鍵詞：

and用來規定必須同時滿足條件，代碼如下：

[CSS] 純文字檢視 複制代碼

1 2 3

@media screen ( min-width : 800px ) and ( max-width : 1200px ) { }

當螢幕滿足大于等于800px和小于等于1200px時就會使用對應的css代碼。

（4）.or關鍵詞：

or用來規定隻要滿足一個條件即可，代碼如下：

[CSS] 純文字檢視 複制代碼

1 2 3

@media screen ( min-width : 800px ) or (orientation: portrait ) { }

當螢幕尺寸大約等于800px，或者方向是縱向的時就會使用對應的css代碼。

（5）.not關鍵字:

[CSS] 純文字檢視 複制代碼

1 2 3

@media not print { }

not用來規定當不是指定條件時即可成立。

（6）.豎屏或者橫屏:

[CSS] 純文字檢視 複制代碼

1 2 3

@media (orientation: portrait ) { }

上面的表示當豎屏時應用響應的css樣式代碼。

[CSS] 純文字檢視 複制代碼

1 2 3

@media (orientation: landscape ) { }

上面的表示當橫屏時應用響應的css樣式代碼。