CSS辞典メディアタイプとメディアクエリ

CSSを出力デバイス別に指定するには「メディアタイプ」を指定します。また、CSS3からはデバイスの種類をより具体的に指定できる「メディアクエリ」が定義されました。

メディアタイプの種類

<link href="tv.css" rel="stylesheet" type="text/css" media="tv">
<link href="print.css" rel="stylesheet" type="text/css" media="print">

キーワード	解説
width	ディスプレイの幅。max-、min-の接頭辞で上限・下限を指定可
height	ディスプレイの高さ。max-、min-の接頭辞で上限・下限を指定可
device-width	表示領域の幅。max-、min-の接頭辞で上限・下限を指定可
device-height	表示領域の高さ。max-、min-の接頭辞で上限・下限を指定可
orientation	デバイスの向き。値は縦向きがportrait、横向きがlandscape
aspect-ratio	ディスプレイの縦横比。max-、min-の接頭辞で上限・下限を指定可
device-aspect-ratio	表示領域の縦横比。max-、min-の接頭辞で上限・下限を指定可
color	カラーディスプレイの色のビット数。max-、min-の接頭辞で上限・下限を指定可
color-index	カラールックアップテーブルの数。max-、min-の接頭辞で上限・下限を指定可
monochrome	白黒ディスプレイのビット数。カラーディスプレイの場合は「0」。max-、min-の接頭辞で上限・下限を指定可
resolution	ディスプレイの解像度。max-、min-の接頭辞で上限・下限を指定可
scan	メディアタイプがtvの場合の画面の走査方法。値はprogressive、またはinterlace。
grid	ディスプレイの表示方法。メディアタイプがttyの場合は「1」。それ以外は「0」

link要素でCSSを読み込むとき、メディアタイプがモバイルデバイス（handheld）及びディスプレイ（screen）でディスプレイの幅が10em以下の場合に、指定したスタイルを読み込みます。

<link rel="stylesheet" media="handheld and (min-width: 10em),screen and (min-width: 10em)">