媒體查詢@media的使用

媒體查詢

參考：https://developer.mozilla.org...
一個媒體查詢由一個可選的媒體類型和零個或多個使用媒體功能的限制了樣式表範圍的表達式組成，例如寬度、高度和顏色。媒體查詢，添加自CSS3，容許內容的呈現針對一個特定範圍的輸出設備而進行裁剪，而沒必要改變內容自己。

基本使用

具體的使用方式是

<!-- link元素中的CSS媒體查詢 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- 樣式表中的CSS媒體查詢 -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

媒體查詢包含一個可選的媒體類型和，知足CSS3規範的條件下，包含零個或多個表達式，這些表達式描述了媒體特徵，最終會被解析爲true或false。若是媒體查詢中指定的媒體類型匹配展現文檔所使用的設備類型，而且全部的表達式的值都是true，那麼該媒體查詢的結果爲true.那麼媒體查詢內的樣式將會生效，

語法邏輯

主要的邏輯也就是如下四個：

• and
• , [也就是 or 的邏輯]
• not 【對查詢結果取反】
• only 【only操做符僅在媒體查詢匹配成功的狀況下被用於應用一個樣式，這對於防止讓選中的樣式在老式瀏覽器中被應用到。】

媒體特色

大多數媒體屬性能夠帶有「min-」或「max-」前綴，用於表達「最低...」或者「最高...」。例如，max-width:12450px表示應用其所包含樣式的條件最高是寬度爲12450px，大於12450px則不知足條件，不會應用此樣式。這避免了使用與HTML和XML衝突的「<」和「>」字符。若是你未向媒體屬性指定一個值，而且該特性的實際值不爲零，則該表達式被解析爲真。
顏色（color）
顏色索引（color-index）
寬高比（aspect-ratio）
設備寬高比（device-aspect-ratio）
設備高度（device-height）
設備寬度（device-width）
網格（grid）
高度（height）
黑白（monochrome）
方向（orientation）
分辨率（resolution）
掃描（scan）
寬度（width）
-moz-images-in-menus
-moz-mac-graphite-theme
-moz-maemo-classic
-moz-device-pixel-ratio
-moz-os-version
-moz-scrollbar-end-backward
-moz-scrollbar-end-forward
-moz-scrollbar-start-backward
-moz-scrollbar-start-forward
-moz-scrollbar-thumb-proportional
-moz-touch-enabled
-moz-windows-classic
-moz-windows-compositor
-moz-windows-default-theme
-moz-windows-theme