CSS媒體查詢總結

標籤：mil   指定   類型   logs   運算式   isp   guid   log   影響   

1媒體查詢概念

一個媒體查詢由一個可選的媒體類型和零個或多個使用媒體功能限制樣式表範圍的運算式組成, 例如 寬度，高度和顏色。在CSS3中添加的媒體查詢，允許內容的呈現針對一個特定範圍的輸出裝置而定製，而不必改變內容本身。

2媒體查詢的兩種引入方式

<!-- link元素中的CSS媒體查詢 --><link rel="stylesheet" media="(max-width: 800px)" href="example.css" /><!-- 樣式表中的CSS媒體查詢 --><style>@media (max-width: 600px) {  .facet_sidebar {    display: none;  }}</style>

3邏輯操作符

可以使用 not，and 和 only 等邏輯操作符構建複雜的媒體查詢。and 操作符用來把多個 媒體屬性 組合成一條媒體查詢。只有當每個屬性都為真時，結果才為真。not操作符用來對一條媒體查詢的結果進行取反。only 操作符表示僅在媒體查詢匹配成功的情況下應用指定樣式。可以通過它讓選中的樣式在老式瀏覽器中不被應用。若使用了 not 或 only 操作符，必須明確指定一個媒體類型。

and

and 關鍵字用於合并多個媒體屬性或合并媒體屬性與媒體類型。一個基本的媒體查詢，即一個媒體屬性與預設指定的 all媒體類型，可能像這樣子：

@media (min-width: 700px) { ... }

如果你只想在橫屏時應用這個，你可以使用 and 操作符合并媒體屬性：

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

or

媒體查詢中使用逗號分隔效果等同於 or 邏輯操作符。

例如，如果你想在最小寬度為700像素或是橫屏的手持功能上應用一組樣式，你可以這樣寫：

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

not

not 關鍵字應用於整個媒體查詢，在媒體查詢為假時返回真 (比如 monochrome 應用於彩色顯示裝置上或一個600像素的螢幕應用於 min-width: 700px 屬性查詢上 )。在逗號媒體查詢列表中 not 僅會否定它應用到的媒體查詢上而不影響其它的媒體查詢。 not 關鍵字僅能應用於整個查詢，而不能單獨應用於一個獨立的查詢。例如，not 在下面的查詢中最後被計算：

@media not all and (monochrome) { ... }

CSS媒體查詢總結