CSS Media Types

Cascading Style Sheets（層疊樣式表）是網頁設計和排版中常用的樣式表語言，本文將著重介紹 CSS Media Types（媒體類型）的相關知識。

一、媒體類型介紹

在 CSS 樣式表文件中，使用 Media Types 定義了 CSS 的應用場景，以確保樣式可以在正確的場景下應用。不同的媒體類型分別對應了不同的輸出設備，比如計算機屏幕、印表機和手機等，它們具有不同的特徵和限制。

在 HTML 頁面中，可以通過以下方式引入樣式表：

  <link rel="stylesheet" media="screen and (min-width: 600px)" href="style.css">

在這個例子中，<link> 元素中的 media 屬性指定了樣式表僅在屏幕寬度大於等於 600 像素時才被使用，這就是使用 Media Types 的方法。Media Types 中的屬性可以根據媒體類型和視口特徵來進行選擇。

二、常用媒體類型

1. screen

screen 是最常見和默認的媒體類型，指計算機的屏幕或其他同類的顯示器。這種媒體類型通常表示屏幕顯示器的特徵和限制。

  <link rel="stylesheet" media="screen" href="style.css">

2. print

print 表示輸出為印表機或輸出到 PDF 的文檔。這種媒體類型通常關注列印和分頁，並限制可用的顏色和解析度。

  <link rel="stylesheet" media="print" href="style.css">

3. speech

speech 表示語音合成器，主要應用於盲人。這種媒體類型處理語音方面的特徵和限制。

  <link rel="stylesheet" media="speech" href="style.css">

三、響應式設計與媒體查詢

響應式設計指設計應從使用設備、瀏覽器窗口大小和屏幕方向等多方面考慮，以適應不同的視口特徵，為用戶提供良好的用戶界面和用戶體驗。媒體查詢是響應式設計的核心，它允許用戶定義特定的CSS規則適用於特定的設備或視口大小。媒體查詢由一組媒體特性和條件組成。

媒體查詢的語法如下：

  @media mediatype and (media feature) {
    CSS-Code;
  }

通過媒體查詢，可以根據屏幕寬度、高度、設備方向和解析度等特徵，選擇不同的樣式。比如，下面的媒體查詢將會應用於屏幕寬度小於 600 像素的情況下：

  @media screen and (max-width: 600px) {
    body {
      background-color: #f00;
    }
  }

這段 CSS 代碼將為小於等於 600 像素的屏幕設置背景顏色為紅色。

總結

CSS 中的媒體類型用於定義 CSS 樣式的應用場景，確保樣式可以在正確的場景下應用。在不同的媒體類型中，可以通過 CSS 中的媒體查詢進行更精確的應用，並實現響應式設計。