CSS3 @Media 媒體查詢

CSS3 媒體類型

值	描述
all	用于所有媒體類型裝置。
print	用于列印機。
screen	用于計算機螢幕、平闆電腦、智能手機等等。
speech	用于大聲“讀出”頁面的螢幕閱讀器。

CSS @media 規則

@media 規則在媒體查詢中用于為不同的媒體類型/裝置應用不同的樣式。

媒體查詢可用于檢查許多事情，諸如：

• 視口的寬度和高度
• 裝置的寬度和高度
• 方向（手機或平闆電腦處于橫屏還是豎屏模式？）
• 分辨率

使用媒體查詢是一種流行的技術，用于向桌上型電腦、筆記本電腦、平闆電腦和手機提供定制的樣式表（響應式網頁設計）。

您還可以使用媒體查詢來規定某些樣式僅适用于列印的文檔或螢幕閱讀器（mediatype：print、screen 或 speech）。

除了媒體類型之外，還有媒體特性。媒體特性通過允許測試使用者代理或顯示裝置的具體特性，為媒體查詢提供了更多特定細節。例如，您可以将樣式僅應用于大于或小于特定寬度的螢幕。

浏覽器支援

表格中的數字注明了完全支援 @media 規則的首個浏覽器版本。

屬性	Chrome	IE	Firefox	Safari	Opera
@media	21	9	3.5	4.0	9

CSS 文法

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
  CSS-Code;
}
      

not、only 和 and 關鍵字的含義：

not：not 關鍵字反正整個媒體查詢的含義。

only：only 關鍵字可防止舊版浏覽器應用指定的樣式，這些浏覽器不支援帶媒體特性的媒體查詢。它對現代浏覽器沒有影響。

and：and 關鍵字将媒體特性與媒體類型或其他媒體特性組合在一起。

它們都是可選的。但是，如果使用 not 或 only，則還必須指定媒體類型。

您還可以針對不同的媒體使用不同的樣式表，就像這樣：

<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css" target="_blank" rel="external nofollow" >
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css" target="_blank" rel="external nofollow" >      

媒體特性

值	描述
any-hover	是否有任何可用的輸入機制允許使用者（将滑鼠等）懸停在元素上？ 在 Media Queries Level 4 中被添加。
any-pointer	可用的輸入機制中是否有任何指針裝置，如果有，它的精度如何？ 在 Media Queries Level 4 中被添加。
aspect-ratio	視口（viewport）的寬高比。
color	輸出裝置每個像素的比特值，常見的有 8、16、32 位。 如果裝置不支援輸出彩色，則該值為 0。
color-gamut	使用者代理和輸出裝置大緻程度上支援的色域。 在 Media Queries Level 4 中被添加。
color-index	輸出裝置的顔色查詢表（color lookup table）中的條目數量。 如果裝置不使用顔色查詢表，則該值為 0。
device-aspect-ratio	輸出裝置的寬高比。 已在 Media Queries Level 4 中被棄用。
device-height	輸出裝置渲染表面（如螢幕）的高度。 已在 Media Queries Level 4 中被棄用。
device-width	輸出裝置渲染表面（如螢幕）的寬度。 已在 Media Queries Level 4 中被棄用。
display-mode	應用程式的顯示模式，如 web app 的 manifest 中的 display 成員所指定 在 Web App Manifest spec 被定義。
forced-colors	檢測是使用者代理否限制調色闆。 在 Media Queries Level 5 中被添加。
grid	輸出裝置使用網格螢幕還是點陣螢幕？
height	視口（viewport）的高度。
hover	主輸入機制是否允許使用者将滑鼠懸停在元素上？ 在 Media Queries Level 4 中被添加。
inverted-colors	浏覽器或者底層作業系統是否反轉了顔色。 在 Media Queries Level 5 中被添加。
light-level	目前環境光水準。 在 Media Queries Level 5 中被添加。
max-aspect-ratio	顯示區域的寬度和高度之間的最大比例。
max-color	輸出裝置每個顔色分量的最大位數。
max-color-index	裝置可以顯示的最大顔色數。
max-height	顯示區域的最大高度，例如浏覽器視窗。
max-monochrome	單色（灰階）裝置上每種“顔色”的最大位數。
max-resolution	裝置的最大分辨率，使用 dpi 或 dpcm。
max-width	顯示區域的最大寬度，例如浏覽器視窗。
min-aspect-ratio	顯示區域的寬度和高度之間的最小比例。
min-color	輸出裝置每個顔色分量的最小位數。
min-color-index	裝置可以顯示的最小顔色數。
min-height	顯示區域的最小高度，例如浏覽器視窗。
min-monochrome	單色（灰階）裝置上每種“顔色”的最小位數。
min-resolution	裝置的最低分辨率，使用 dpi 或 dpcm。
min-width	顯示區域的最小寬度，例如浏覽器視窗。
monochrome	輸出裝置單色幀緩沖區中每個像素的位深度。 如果裝置并非黑白螢幕，則該值為 0。
orientation	視窗（viewport）的旋轉方向（橫屏還是豎屏模式）。
overflow-block	輸出裝置如何處理沿塊軸溢出視口(viewport)的内容。 在 Media Queries Level 4 中被添加。
overflow-inline	沿内聯軸溢出視口(viewport)的内容是否可以滾動？ 在 Media Queries Level 4 中被添加。
pointer	主要輸入機制是一個指針裝置嗎？如果是，它的精度如何？ 在 Media Queries Level 4 中被添加。
prefers-color-scheme	探測使用者傾向于選擇亮色還是暗色的配色方案。 在 Media Queries Level 5 中被添加。
prefers-contrast	探測使用者是否有向系統要求提高或降低相近顔色之間的對比度。 在 Media Queries Level 5 中被添加。
prefers-reduced-motion	使用者是否希望頁面上出現更少的動态效果。 在 Media Queries Level 5 中被添加。
prefers-reduced-transparency	使用者是否傾向于選擇更低的透明度。 在 Media Queries Level 5 中被添加。
resolution	輸出裝置的分辨率，使用 dpi 或 dpcm。
scan	輸出裝置的掃描過程（适用于電視等）。
scripting	探測腳本（例如 JavaScript）是否可用。 在 Media Queries Level 5 中被添加。
update	輸出裝置更新内容的渲染結果的頻率。 在 Media Queries Level 4 中被添加。
width	視窗（viewport）的寬度。

        @media screen and (min-width:1200px){

            #content {

                color: #f00;

                background: #000;

            }

        }

        @media screen and (min-width:992px) and (max-width: 1199px){

            #content {

                color: #f00;

                background: #000;

            }

        }

        @media screen and (min-width: 768px) and (max-width: 991px) {

            #content {

                color: #ff0;

                background: #f00;

            }

        }

        @media screen and (max-width: 767px) and (min-width: 480px){

            #content {

                color: #000;

                background: #0ff;

            }

        }

        @media screen and (max-width: 480px){

            #content {

                color: #000;

                background: #0ff;

            }

        }

參考資料：

1、CSS 媒體查詢

2、媒體查詢入門指南 - 學習 Web 開發 | MDN

3、CSS媒體查詢（@media）全面解析