CSS Media Types分類

一、什麼是媒體查詢

在介紹CSS Media Types分類之前，我們需要先介紹媒體查詢。媒體查詢是CSS3中的一個新特性，在不同的媒體類型下，可以針對不同的媒體設備設置不同的樣式。通過判斷媒體類型及對應的媒體特性，可以為網頁針對不同的設備屏幕或輸出介質提供更加優化的布局、字體、圖像等方面的樣式。

    /* 當屏幕寬度小於等於768px時執行樣式 */
    @media screen and (max-width: 768px) {
        body {
            font-size: 14px;
        }
    }

上述代碼表示在屏幕寬度小於等於768px時，將body標籤內的文字字型大小設置為14px。

二、CSS Media Types分類

CSS Media Types是媒體類型的一種分類方法，它根據輸出介質的不同，將所有媒體類型分為了不同的種類。在使用媒體查詢時，我們通常需要結合媒體類型來選擇對應的媒體特性。

1. all

all是媒體類型中最基本的類型，它適用於所有設備和媒體。當我們沒有指定具體的媒體類型時，CSS默認會使用all類型。例如：

    /* 設置所有設備屏幕寬度大於等於768px時，背景色變為紅色 */
    @media (min-width: 768px) {
        body {
            background-color: red;
        }
    }

2. print

print媒體類型適用於印表機輸出，它的特點是輸出的頁面不需要考慮瀏覽器窗口大小以及屏幕解析度等因素。在列印文檔時，可以配置列印樣式為針對不同的媒體類型輸出不同的內容。例如：

    /* 設置在列印設備下，隱藏文檔頁眉和頁腳 */
    @media print {
        header, footer {
            display: none;
        }
    }

3. screen

screen媒體類型適用於計算機屏幕、平板電腦、智能手機等顯示設備，它的特點是能夠動態響應屏幕寬度變化，實現網頁的響應式布局。例如：

    /* 在屏幕寬度小於等於768px時，將logo圖片替換為縮略圖 */
    @media screen and (max-width: 768px) {
        .logo img {
            content: url("logo-small.png");
        }
    }

4. speech

speech媒體類型適用於語音合成器，它的特點是通過語音方式輸出頁面內容，例如電視語音解說、電子書閱讀器等設備。在使用時需要考慮到語音輸出的特殊性，優化頁面的嵌套結構、標籤的語義化等方面。例如：

    /* 在語音合成器設備下，將標題字型大小設置為20px */
    @media speech {
        h1 {
            font-size: 20px;
        }
    }

5. handheld

handheld媒體類型適用於手持設備，例如行動電話、PDA等小屏幕設備。與screen媒體類型相比，handheld針對小屏幕等設備的構造及樣式作了更多的限制。例如：

    /* 在手持設備下，隱藏側邊欄 */
    @media handheld {
        .sidebar {
            display: none;
        }
    }

三、CSS常用媒體特性

在選擇媒體類型的同時，還需要了解媒體特性的概念和用法。媒體特性是根據媒體類型的不同而存在的，包括屏幕寬度、屏幕高度、設備朝向等方面的屬性。

1. width和height

width和height分別表示屏幕的寬度和高度，應用時可以選擇max或min操作符指定最大或最小值。

    /* 在屏幕寬度小於等於768px且高度小於等於1024px時，將背景顏色設置為黃色 */
    @media screen and (max-width: 768px) and (max-height: 1024px) {
        body {
            background-color: yellow;
        }
    }

2. device-width和device-height

device-width和device-height分別表示設備的寬度和高度，可以用來區分不同的設備類型。例如，iPad和iPhone的解析度不同，在需要針對不同的設備類型設置樣式時，可以使用device-width和device-height進行區分。

    /* 在iPad上，將body字型大小設置為16px */
    @media screen and (device-width: 768px) and (device-height: 1024px) {
        body {
            font-size: 16px;
        }
    }

3. orientation

orientation用於判斷設備的朝向，可以分為landscape（橫向）和portrait（縱向）兩種類型。它可以用來針對不同的朝向設置不同的樣式。

    /* 在橫向模式下，將logo圖片替換為寬屏版 */
    @media screen and (orientation: landscape) {
        .logo img {
            content: url("logo-wide.png");
        }
    }

4. resolution

resolution表示設備的解析度，使用dpi（每英寸點數）作為單位，在高解析度的設備上適當地縮小圖片和文字大小，可以提高網頁瀏覽的流暢度和用戶體驗。

    /* 在高解析度設備上，將logo字型大小設置為12px */
    @media screen and (min-resolution: 300dpi) {
        .logo {
            font-size: 12px;
        }
    }

四、總結

在網頁設計中，媒體查詢是非常重要的技術。通過合理地選擇媒體類型和媒體特性，可以為不同的設備輸出樣式，並實現網頁的響應式布局。

CSS Media Types可以幫助我們更好地理解媒體查詢的應用，包括all、print、screen、speech和handheld等5種類型。同時，熟練掌握常用的媒體特性，也對於實現不同設備的兼容性和布局優化來說至關重要。