CSS媒體查詢總結

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) { ... }