CSS媒體類型

一、什麼是CSS媒體類型

CSS媒體類型是用於指定不同輸出媒體的樣式表。可以根據設備的特性來選擇樣式表，比如屏幕、印表機、手機等。

媒體類型通過CSS @media規則來定義，其基本語法格式如下：

@media media-type {
  CSS rules;
}

可以使用不同的媒體類型，來適應不同屏幕的需求。媒體類型包括：屏幕、列印、手持設備等。

@media screen {
  CSS rules;
}
@media print {
  CSS rules;
}
@media handheld {
  CSS rules;
}

二、屏幕媒體類型

屏幕媒體類型主要針對電腦和移動設備上的屏幕顯示，其中最常用的屬性就是width和device-width。width屬性指定的是視口寬度，而device-width屬性指定的是屏幕的物理寬度。

另一種常用的屬性是height和device-height，用於指定視口和屏幕的高度。

@media screen and (max-width: 600px) {
  CSS rules;
}
@media screen and (orientation: landscape) {
  CSS rules;
}
@media screen and (resolution: 300dpi) {
  CSS rules;
}

三、列印媒體類型

列印媒體類型用於指定頁面在列印時的樣式表，可以通過它控制字體大小、行高、顏色等CSS屬性。在IE瀏覽器中，可以使用CSS的page-break屬性來控制頁面的分頁。

@media print {
  CSS rules;
}
@media print and (color) {
  CSS rules;
}
@media print and (min-resolution: 300dpi) {
  CSS rules;
}

四、手持設備媒體類型

手持設備媒體類型包括移動設備和平板電腦，其主要特點包括小屏幕、少內存、低速處理器等。常用的屬性有orientation、device-width和device-height。

@media handheld {
  CSS rules;
}
@media handheld and (orientation: landscape) {
  CSS rules;
}
@media handheld and (max-device-width: 480px) {
  CSS rules;
}

五、all媒體類型

all媒體類型表示適用於所有類型的設備和媒體，可以用於指定一些通用的樣式表。在實際開發中，all媒體類型很少用到，因為它不區分設備和媒體類型。

@media all {
  CSS rules;
}

六、總結

使用CSS媒體類型可以使頁面樣式在不同設備和媒體下具有良好的表現，提高用戶體驗。在實際應用中，我們可以根據不同設備和瀏覽器內核來採用不同的媒體類型。