在CSS2中，媒體查詢只使用于和標(biāo)簽中，以media屬性存在

media屬性用于為不同的媒介類型規(guī)定不同的樣式
screen         計(jì)算機(jī)屏幕（默認(rèn)值） 
tty            電傳打字機(jī)以及使用等寬字符網(wǎng)格的類似媒介
tv             電視類型設(shè)備（低分辨率、有限的屏幕翻滾能力）
projection     放映機(jī)
handheld       手持設(shè)備（小屏幕、有限的帶寬）
print          打印預(yù)覽模式 / 打印頁(yè)
braille        盲人用點(diǎn)字法反饋設(shè)備
aural          語(yǔ)音合成器
all            適合所有設(shè)備

真正廣泛使用且所有瀏覽器都兼容的媒介類型是'screen'和'all'

媒體屬性是CSS3新增的內(nèi)容，多數(shù)媒體屬性帶有“min-”和“max-”前綴，用于表達(dá)“小于等于”和“大于等于”。這避免了使用與HTML和XML沖突的“<”和“>”字符

[注意]媒體屬性必須用括號(hào)()包起來(lái)，否則無(wú)效

下表中列出了所有的媒體屬性

width | min-width | max-width
height | min-height | max-height
device-width | min-device-width | max-device-width
device-height | min-device-height | max-device-height
aspect-ratio | min-aspect-ratio | max-aspect-ratio
device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
color | min-color | max-color
color-index | min-color-index | max-color-index
monochrome | min-monochrome | max-monochrome
resolution | min-resolution | max-resolution
scan | grid

分辨率（resolution）

分辨率指定輸出設(shè)備的分辨率（像素密度）。分辨率可以用每英寸（dpi）或每厘米（dpcm）的點(diǎn)數(shù)來(lái)表示
and

and操作符用來(lái)把多個(gè)媒體屬性組合起來(lái)，合并到同一條媒體查詢中。只有當(dāng)每個(gè)屬性都為真時(shí)，這條查詢的結(jié)果才為真

[注意]在不使用not或only操作符的情況下，媒體類型是可選的，默認(rèn)為all

滿足橫屏以及最小寬度為700px的條件應(yīng)用樣式表

@media all and (min-width: 700px) and (orientation: landscape) { ... }
由于不使用not或only操作符的情況下，媒體類型是可選的，默認(rèn)為 all，所以可以簡(jiǎn)寫(xiě)為

@media (min-width: 700px) and (orientation: landscape) { ... }
or

將多個(gè)媒體查詢以逗號(hào)分隔放在一起；只要其中任何一個(gè)為真，整個(gè)媒體語(yǔ)句就返回真，相當(dāng)于or操作符

滿足最小寬度為700像素或是橫屏的手持設(shè)備應(yīng)用樣式表

@media (min-width: 700px), handheld and (orientation: landscape) { ... }
not

not操作符用來(lái)對(duì)一條媒體查詢的結(jié)果進(jìn)行取反

[注意]not關(guān)鍵字僅能應(yīng)用于整個(gè)查詢，而不能單獨(dú)應(yīng)用于一個(gè)獨(dú)立的查詢

@media not all and (monochrome) { ... }
//等價(jià)于
@media not (all and (monochrome)) { ... }
only

only操作符表示僅在媒體查詢匹配成功時(shí)應(yīng)用指定樣式。可以通過(guò)它讓選中的樣式在老式瀏覽器中不被應(yīng)用

media="only screen and (max-width:1000px)"{...}
上面這行代碼，在老式瀏覽器中被解析為media="only"，因?yàn)闆](méi)有一個(gè)叫only的設(shè)備，所以實(shí)際上老式瀏覽器不會(huì)應(yīng)用樣式

media="screen and (max-width:1000px)"{...}
上面這行代碼，在老式瀏覽器中被解析為media="screen"，它把后面的邏輯表達(dá)式忽略了。所以老式瀏覽器會(huì)應(yīng)用樣式

所以，在使用媒體查詢時(shí)，only最好不要忽略