歡迎參與個人獨立開發的閱時即查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)">
   

    
1
   

上面的意思是當螢幕的寬度大於等於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)">
   

    
1
   

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

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

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

    
1
    
2
    
3
    
4
    
5
   

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

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

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

瀏覽器的支援狀況

媒體型別

媒體功能

值 和 描述aspect-ratio    定義輸出裝置中的頁面可見區域寬度與高度的比率color   定義輸出裝置每一組彩色原件的個數。如果不是彩色裝置，則值等於0color-index 定義在輸出裝置的彩色查詢表中的條目數。如果沒有使用彩色查詢表，則值等於0device-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  定義在一個單色框架緩衝區中每畫素包含的單色原件個數。如果不是單色裝置，則值等於0orientation 定義輸出裝置中的頁面可見區域高度是否大於或等於寬度。resolution  定義裝置的解析度。如：96dpi, 300dpi, 118dpcmscan    定義電視類裝置的掃描工序。width   定義輸出裝置中的頁面可見區域寬度。
   

    
1
    
2
    
3
    
4
    
5
    
6
    
7
    
8
    
9
    
10
    
11
    
12
    
13
    
14
    
15
    
16
    
17
    
18
    
19
    
20
    
21
    
22
    
23
    
24
    
25
    
26
    
27
    
28
    
29
    
30
    
31
    
32
    
33
    
34
   

再分享一下我老師大神的人工智慧教程吧。零基礎！通俗易懂！風趣幽默！希望你也加入到我們人工智慧的隊伍中來！http://www.captainbed.net