歡迎參與個人獨立開發的閱時即查web APP公測，請掃碼體驗：

CSS3 @media是什麼，功能呢？

在響應式web設計中，CSS3 @media是一個入門級的技巧

CSS3 @media（也成為CSS3媒體查詢）其作用就是允許新增表示式用以確定媒體的環境情況，以此來應用不同的樣式表。換句話說，其允許我們在不改變內容的情況下，改變頁面的佈局以精確適應不同的裝置。

CSS3 @media的兩種工作方式：

一種是直接在link中判斷裝置的尺寸，然後引用不同的css檔案：

<link rel="stylesheet" type="text/css" href="styleA.css"
 
 media="screen and (min-width: 400px)">

上面的意思是當螢幕的寬度大於等於400px的時候，應用styleA.css

在media屬性裡：

screen 是媒體型別裡的一種，CSS2.1定義了10種媒體型別and 被稱為關鍵字，其他關鍵字還包括 not(排除某種裝置)，only(限定某種裝置)(min-width: 400px) 就是媒體特性，其被放置在一對圓括號中。完整的特性參看 相關的Media features部分

<link rel="stylesheet" type="text/css" href="styleB.css"  media="screen and (min-width: 600px) and (max-width: 800px)"
 
>

上邊的意思是當螢幕的寬度大於600小於800時，應用styleB.css

另一種方式，即是直接寫在

@media screen and (max-width: 600px) { /*當螢幕尺寸小於600px時，應用下面的CSS樣式*/
  .class {
    background: #ccc;
  }
}

寫法是前面加@media，其它跟link裡的media屬性相同

其實基本上就是樣式覆蓋~，判斷裝置，然後引用不同的樣式檔案覆蓋。

要注意的是由於網頁會根據螢幕寬度調整佈局，所以不能使用絕對寬度的佈局，也不能使用具有絕對寬度的元素。這一條非常重要，否則會出現橫向滾動條。

瀏覽器的支援狀況

媒體型別

媒體功能

值 和 描述
aspect-ratio    定義輸出裝置中的頁面可見區域寬度與高度的比率
color   定義輸出裝置每一組彩色原件的個數。如果不是彩色裝置，則值等於0
color-index 定義在輸出裝置的彩色查詢表中的條目數。如果沒有使用彩色查詢表，則值等於0
device-aspect-ratio 定義輸出裝置的螢幕可見寬度與高度的比率。
device-height   定義輸出裝置的螢幕可見高度。
device-width    定義輸出裝置的螢幕可見寬度。
grid    用來查詢輸出裝置是否使用柵格或點陣。
height  定義輸出裝置中的頁面可見區域高度。
max-aspect-ratio    定義輸出裝置的螢幕可見寬度與高度的最大比率。
max-color   定義輸出裝置每一組彩色原件的最大個數。
max-color-index 定義在輸出裝置的彩色查詢表中的最大條目數。
max-device-aspect-ratio 定義輸出裝置的螢幕可見寬度與高度的最大比率。
max-device-height   定義輸出裝置的螢幕可見的最大高度。
max-device-width    定義輸出裝置的螢幕最大可見寬度。
max-height  定義輸出裝置中的頁面最大可見區域高度。
max-monochrome  定義在一個單色框架緩衝區中每畫素包含的最大單色原件個數。
max-resolution  定義裝置的最大解析度。
max-width   定義輸出裝置中的頁面最大可見區域寬度。
min-aspect-ratio    定義輸出裝置中的頁面可見區域寬度與高度的最小比率。
min-color   定義輸出裝置每一組彩色原件的最小個數。
min-color-index 定義在輸出裝置的彩色查詢表中的最小條目數。
min-device-aspect-ratio 定義輸出裝置的螢幕可見寬度與高度的最小比率。
min-device-width    定義輸出裝置的螢幕最小可見寬度。
min-device-height   定義輸出裝置的螢幕的最小可見高度。
min-height  定義輸出裝置中的頁面最小可見區域高度。
min-monochrome  定義在一個單色框架緩衝區中每畫素包含的最小單色原件個數
min-resolution  定義裝置的最小解析度。
min-width   定義輸出裝置中的頁面最小可見區域寬度。
monochrome  定義在一個單色框架緩衝區中每畫素包含的單色原件個數。如果不是單色裝置，則值等於0
orientation 定義輸出裝置中的頁面可見區域高度是否大於或等於寬度。
resolution  定義裝置的解析度。如：96dpi, 300dpi, 118dpcm
scan    定義電視類裝置的掃描工序。
width   定義輸出裝置中的頁面可見區域寬度。