媒體類別 (media)
media 的屬性，通常用在宣告在不同裝置、不同螢幕尺寸下，要使用那一個不一樣的 CSS 樣式表。比如說列印時字想要設定小一點，在手機上顯示的時候字想要顯示大一點..之類的。
裝置媒體的表示可以用 not(排除) 和 and(以及) 來含括想要使用共同 CSS 樣式的裝置媒體類型和媒體規格(如螢幕的解析度大小)。
比如說：
<link rel="stylesheet" media="screen and (min-width: 930px)" href="bigscreen.css">
以上的意思就是說，當裝置媒體為「螢幕」而且「寬不小於 930 pixels」時就匯入 bigscreen.css 這一個樣式表。
screen 就是媒體類別，而括弧裡面的 min-width: 930px 就是媒體規格。
@media screen and (min-width: 400px) {
.c1 {
width: 100%;
font-size:16px;
}
}
@media screen and (min-width: 900px) {
.c1 {
width: 50%;
font-size:20;
}
}
以上的宣告表示一樣的「c1」樣式，在不同的裝置我們希望它呈現不一樣的寬度和字體大小。
當螢幕寬度介於400px ~ 899px 之間的時候，我們認為他可能是手機螢幕，或是其他較小的螢幕，我們的 c1 就呈現螢幕 100% 的寬度。
當螢幕寬度大於等於 900px 時，c1 樣式就只要呈現 50% ，這樣加上前面介紹的 display: inline-block 就可以讓使用 c1 樣式的元素兩兩並排。
＊在實做時，如果width: 50% 無法兩兩並排， 可以試著改成 49% 或 48%，因為可能有其他元素的 padding, margin, border 或其他因素影響。
width:99%
width:99%
width:48%
width:48%
常見的媒體類別有：
| all | 所有類別的裝置媒體 |
| screen | 電腦螢幕 |
| 列印 | |
| speech | 螢幕朗誦裝置 |
常見的媒體規格(特性)有：
| max-height | 最大高(多高以下) |
| max-width | 最大寬(多寬以下) |
| min-height | 最小高(多高以上) |
| min-width | 最小寬(多寬以上) |
| orientation | 裝置方向：landscape(水平), portrait(垂直) |
我們如果要設定複合條件就用 and 連接起來：
以上的範例是說，如果裝置的寬度有到700px，而且把裝置(這種狀況下通常是手機) 打橫，背景就會變成黃色。
那應該有人要問了，所謂寬度有滿700px，意思是打橫後寬度有滿 700px 還是打直時寬度有滿700px。
你可以實驗一下，不過如果你懶得實驗，答案是打橫後寬度有滿 700px。
還有，現在很多手機為了顯示效果更精細，有兩倍像素或三倍像素的顯示(如iphone)。
比如說 iPhone XS 顯示 782 x 375 但是三倍密度後變成 2,436 × 1,125
這時仍然是以「未」三倍後的數值為判斷標準喔。比如說上面的例子如果改成( min-width: 800px )，iPhone XS 打橫後背景仍然不會變黃色，因為它打橫後寬也只有 782 px。
常用的大小分界大概是寬 350px ~ 610px ~ 900px ~ 1024px ~ 1500px以上
1500px 以上大概是桌機或筆電
1024px ~ 1500px 可能是筆電或 ipad pro
900px ~ 1024px 大概是各種 pad
610px 以下大概是手機
整串寫起來大概會是像下面這樣
body{background-color:#555}
@media all and (max-width: 1500px) {body {background-color:#cc9 }}
@media all and (max-width: 1024px) { body { background-color:#ff0 }}
@media all and (max-width: 900px) { body { background-color:#900 }}
@media all and (max-width: 610px) { body {background-color:#c90}}
@media all and (max-width: 350px) { body { background-color:#0c6}}