CSS Media Type

一、基礎知識

1.1 樣式媒體類型

CSS媒體類型是為適應不同媒體設備的需求而設計的樣式規則集合。通過不同的媒體類型可以為不同的設備提供定製化的排版和渲染效果，使得網頁在不同設備上都能提供好的用戶體驗。

1.2 常見的媒體類型

以下是一些常見媒體類型：

@media screen {
 /* 樣式規則 */
}

@media print {
 /* 樣式規則 */
}

@media (min-width: 768px) and (max-width: 1024px) {
 /* 樣式規則 */
}

1.3 媒體類型的應用場景

美觀的網站在不同設備上都能提供好的用戶體驗，利用媒體查詢，可以針對不同設備大小設置不同的樣式，包括網頁的布局，圖片的大小，文本字體大小等等。人們可以用這些方法在不同設備上達到好的顯示效果，比如為不同平台設置不同的頁面寬度，來應對不同種類屏幕。

1.4 媒體類型的實現方式

通過@media和媒體查詢來實現媒體類型。具體方法是在CSS中加上@media規則，內部指定樣式規則。例如下列代碼中的@media screen告知CSS渲染器，只有當媒體類型為屏幕時，應用該段代碼。

@media screen {
  body {
    background-color: lightblue;
  }
}

二、常見媒體類型

2.1 screen媒體類型

screen媒體類型是默認的媒體類型，指的是那些支持顏色屏幕的設備。它可以在PC、Mac、iOS設備上使用，搭載Chrome、Safari等瀏覽器的設備，以及其他一些支持色彩的設備。

@media screen {
  body {
    background-color: lightgray;
  }
}

2.2 print媒體類型

print媒體類型是指打印機等輸出設備的媒體類型。它定義的樣式只會在內容打印時使用，並被許多瀏覽器支持，包含Chrome、Firefox、Safari等。print樣式應考慮為設備進行特別的調整，以確保打印出的內容看起來很好看。

@media print {
  body {
    font-size: 12pt;
  }
}

2.3 handheld媒體類型

handheld媒體類型指的是便攜設備（例如裝有移動操作系統的智能手機） 的媒體類型，其中包含部分或全部具有可視化屏幕。由於現在許多設備都是這樣的，並且偏向於較小的屏幕，它是為了優化便攜設備而創建的。例如如果你在iPhone打開網頁，那麼瀏覽器會使用handheld媒體類型的樣式。

@media handheld {
  a {
    color: black;
  }
}

三、媒體查詢的實現

3.1 媒體特性

媒體特性是通過媒體查詢設置的標準，它源於媒體類型而存在的。可以放置在@media規則內部的括號內，使得樣式只在滿足這些特性時生效。

@media (min-width: 600px) {
  body {
    font-size: 16px;
  }
}

3.2 屬性值表達式

在媒體查詢中，需要根據媒體特性的值來匹配設備。這些特定媒體查詢是由屬性值表達式實現的。例如，上面的媒體查詢只有在最小寬度大於等於600像素時才會觸發。

@media (min-height: 400px), (min-width: 600px) {
  /* 樣式規則 */
}

3.3 邏輯運算符

可以能同時具有多個條件，需要使用邏輯運算符來組合查詢條件。具體地說，可以使用and、not和only。

/* and */
@media (min-width: 400px) and (max-height: 800px) {
  /* 樣式規則 */
}

/* not */
@media not screen and (color) {
  /* 樣式規則 */
}

/* only */
@media only screen and (min-width: 768px) {
  /* 樣式規則 */
}