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

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

CSS媒體查詢總結