CSS 語法 17:媒體類別 @media

媒體類別 (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 或其他因素影響。

A
width:99%
B
width:99%
A
width:48%
B
width:48%

常見的媒體類別有:

all 所有類別的裝置媒體
screen 電腦螢幕
print 列印
speech 螢幕朗誦裝置

常見的媒體規格(特性)有:

max-height 最大高(多高以下)
max-width 最大寬(多寬以下)
min-height 最小高(多高以上)
min-width 最小寬(多寬以上)
orientation 裝置方向:landscape(水平), portrait(垂直)

我們如果要設定複合條件就用 and 連接起來:

<style>
@media screen and (min-width: 700px) and (orientation: landscape) { 
	body{
	background-color:yellow;
	}
}
</style>

以上的範例是說,如果裝置的寬度有到700px,而且把裝置(這種狀況下通常是手機) 打橫,背景就會變成黃色。
那應該有人要問了,所謂寬度有滿700px,意思是打橫後寬度有滿 700px 還是打直時寬度有滿700px。
你可以實驗一下,不過如果你懶得實驗,答案是打橫後寬度有滿 700px。

還有,現在很多手機為了顯示效果更精細,有兩倍像素或三倍像素的顯示(如iphone)。

比如說 iPhone XS 顯示 782 x 375  但是三倍密度後變成 2,436 × 1,125

這時仍然是以「未」三倍後的數值為判斷標準喔。比如說上面的例子如果改成( min-width: 800px ),iPhone XS 打橫後背景仍然不會變黃色,因為它打橫後寬也只有 782 px。