語法

媒體查詢包含了一個媒體類型 和如CSS3規(guī)范中描述的包含一個或多個表達(dá)式的媒體屬性，這些媒體屬性會被解析成真或假。如果媒體查詢中的媒體類型與文檔要展示的設(shè)備相符則查詢結(jié)果為真，并且媒體查詢中的所有表達(dá)式為真。

當(dāng)媒體查詢?yōu)檎鏁r，相關(guān)的樣式表或樣式規(guī)則就會按照正常的級聯(lián)規(guī)則被應(yīng)用。即使媒體查詢返回假， <link> 標(biāo)簽上帶有媒體查詢的樣式表 仍將被下載 （只不過不會被應(yīng)用）。

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

邏輯操作符

操作符 not，and 和 only 可以用來構(gòu)建復(fù)雜的媒體查詢。
and 操作符用來把多個 媒體屬性 組合起來，合并到同一條媒體查詢中。只有當(dāng)每個屬性都為真時，這條查詢的結(jié)果才為真。
not 操作符用來對一條媒體查詢的結(jié)果進(jìn)行取反。
only 操作符表示僅在媒體查詢匹配成功的情況下應(yīng)用指定樣式?？梢酝ㄟ^它讓選中的樣式在老式瀏覽器中不被應(yīng)用。
若使用了 not 或 only 操作符，必須明確指定一個媒體類型。

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

and

and 關(guān)鍵字用于合并多個媒體屬性或合并媒體屬性與媒體類型。一個基本的媒體查詢，即一個媒體屬性與默認(rèn)指定的 all媒體類型，可能像這樣子：

如果你只想在橫屏?xí)r應(yīng)用這個，你可以使用 and 操作符合并媒體屬性：

現(xiàn)在上面的媒體查詢僅在可視區(qū)域?qū)挾炔恍∮?00像素并在在橫屏?xí)r有效。如果，你僅想再電視媒體上應(yīng)用，你可以使用 and 操作符合并媒體屬性：

現(xiàn)在，上面媒體查詢僅在電視媒體上，可視區(qū)域不小于700像素寬度并且是橫屏?xí)r有效。

逗號分隔列表

媒體查詢中使用逗號分隔效果等同于 or 邏輯操作符。當(dāng)使用逗號分隔的媒體查詢時，如果任何一個媒體查詢返回真，樣式就是有效的。逗號分隔的列表中每個查詢都是獨(dú)立的，一個查詢中的操作符并不影響其它的媒體查詢。這意味著逗號媒體查詢列表能夠作用于不同的媒體屬性、類型和狀態(tài)。

例如，如果你想在最小寬度為700像素或是橫屏的手持設(shè)備上應(yīng)用一組樣式，你可以這樣寫：

如上文，如果是一個800像素寬的屏幕設(shè)備，媒體語句將會返回真，因為第一部分相當(dāng)于 @media all and (min-width: 700px) 將會應(yīng)用于該設(shè)備并且返回真，盡管我的屏幕媒體類型并不與第二部分的手持媒體類型相符。同樣地，如果我是一個500像素寬的橫屏手持設(shè)備，盡管第一部分因為寬度問題而不匹配，第二部分仍會成功，因此整個媒體查詢返回真。

not

not 關(guān)鍵字應(yīng)用于整個媒體查詢，在媒體查詢?yōu)榧贂r返回真 (比如 monochrome 應(yīng)用于彩色顯示設(shè)備上或一個600像素的屏幕應(yīng)用于 min-width: 700px 屬性查詢上 )。在逗號媒體查詢列表中 not 僅會否定它應(yīng)用到的媒體查詢上而不影響其它的媒體查詢。 not 關(guān)鍵字僅能應(yīng)用于整個查詢，而不能單獨(dú)應(yīng)用于一個獨(dú)立的查詢。例如，not 在下面的查詢中最后被計算：

等價于：

而不是：

另一個例子，看下面的媒體查詢：

等價于：

only

only 關(guān)鍵字防止老舊的瀏覽器不支持帶媒體屬性的查詢而應(yīng)用到給定的樣式：

偽范式

媒體查詢是大小寫不敏感的。包含未知媒體類型的查詢通常返回假。

注意: 表達(dá)式需要用圓括號。沒有使用的會引起錯誤。

媒體查詢可檢測的特性
width：視口寬度
height：視口高度
device-width：渲染表面的寬度(對我們來說,就是設(shè)備屏幕的寬度)
device-height：渲染表面的高度(對我們來說,就是設(shè)備屏幕的高度)
orientation：檢查設(shè)備處于橫向還是縱向
aspect-ratio：基于視口寬度和高度的寬高比。一個 16∶9 比例的顯示屏可以這樣定義 aspect-ratio: 16/9
device-aspect-ratio：和 aspect-ratio 類似,基于設(shè)備渲染平面寬度和高度的寬高比
color:每種顏色的位數(shù)。例如 min-color: 16 會檢測設(shè)備是否擁有 16 位顏色。
color-index:設(shè)備的顏色索引表中的顏色數(shù)。值必須是非負(fù)整數(shù)。
monochrome:檢測單色幀緩沖區(qū)中每像素所使用的位數(shù)。值必須是非負(fù)整數(shù),如
monochrome: 2
resolution:用來檢測屏幕或打印機(jī)的分辨率,如 min-resolution: 300dpi。還可以接受每厘米像素點(diǎn)數(shù)的度量值,如 min-resolution: 118dpcm。
scan:電視機(jī)的掃描方式,值可設(shè)為 progressive(逐行掃描)或 interlace(隔行掃描)。如 720p HD 電視(720p 的 p 即表明是逐行掃描)匹配 scan: progressive,而 1080i HD 電視(1080i 中的 i 表明是隔行掃描)匹配 scan: interlace。
grid:用來檢測輸出設(shè)備是網(wǎng)格設(shè)備還是位圖設(shè)備。
除 scan 和 grid 之外,都可使用 min 和 max 前綴來創(chuàng)建一個查詢范圍，如min-width:200px、max-width:360px。

利用viewport禁止用戶縮放

meta標(biāo)簽表示：強(qiáng)制讓文檔的寬度與設(shè)備的寬度保持1:1，并且文檔最大的寬度比例是1.0，且不允許用戶點(diǎn)擊屏幕放大瀏覽； 尤其要注意的是content里多個屬性的設(shè)置一定要用分號+空格來隔開，如果不規(guī)范將不會起作用。
width viewport 寬度(數(shù)值/device-width)

height viewport 高度(數(shù)值/device-height)

initial-scale 初始縮放比例

maximum-scale 最大縮放比例

minimum-scale 最小縮放比例

user-scalable 是否允許用戶縮放(yes/no)

minimal-ui iOS 7.1 beta 2 中新增屬性（注意：iOS8 中已經(jīng)刪除），可以在頁面加載時最小化上下狀態(tài)欄。

注意：關(guān)于viewport，還有一個很重要的概念是：iphone 的safari 瀏覽器完全沒有滾動條，而且不是簡單的“隱藏滾動條”， 是根本沒有這個功能。iphone 的safari 瀏覽器實際上從一開始就完整顯示了這個網(wǎng)頁，然后用viewport 查看其中的一部分。 當(dāng)你用手指拖動時，其實拖的不是頁面，而是viewport。瀏覽器行為的改變不止是滾動條，交互事件也跟普通桌面不一樣。

最新評論