概要
link要素のmedia属性の値として使用。メディアタイプやメディア特性で指定。演算子を使って複数の条件を指定可能。
メディア・クエリの要素
メディア・タイプ
| screen | コンピュータ画面 |
| tty | テレタイプなどの字幅が固定の機器 |
| tv | テレビ |
| projection | プロジェクタ |
| handheld | モバイル機器 |
| プリンタ | |
| braille | 点字出力機器 |
| aural | 音声出力機器 |
| all | 全てのメディア |
メディア特性
- width
- 表示領域の幅。min-/max-前置詞使用可。
1[min-/max-]width:[XXX]px - height
- 表示領域の高さ。min-/max-前置詞使用可。
1[min-/max-]height:[XXX]px - device-width
- 出力デバイス(画面や印刷用紙)の幅。min-/max-前置詞使用可。
- device-height
- 出力デバイス(画面や印刷用紙)の高さ。min-/max-前置詞使用可。
- orientation
- 縦表示(portrait)／横表示(landscape)を指定。
1orientation:[portrait/landscape] - aspect-ratio
- 表示領域のアスペクト比。水平ピクセル数と垂直ピクセル数を、スラッシュ(/)区切りで指定。min-/max-前置詞使用可。
- device-aspect-ratio
- 出力デバイスのアスペクト比。考え方はaspect-ratioと同じ。min-/max-前置詞使用可。
- color
- 出力デバイスのカラーコンポーネントあたりのビット数。カラーデバイスでない場合の値は”0″。min-/max-前置詞使用可。
- color-index
- 出力デバイスのカラールックアップテーブルのエントリ数。min-/max-前置詞使用可。
- monochrome
- モノクロデバイス上のピクセルあたりのビット数。モノクロデバイスでない場合の値は”0″。min-/max-前置詞使用可。
- resolution
- 出力デバイスの解像度。min-/max-前置詞使用可。
- scan
- テレビ型出力デバイスの操作方式。
progressive プログレッシブ方式 interlace インターレース方式 - grid
- 出力デバイスがグリッド又はビットマップであるかどうかを調べる。
演算子
| and | AND演算子 |
| not | NOT演算子 |
| , (comma) | OR演算子 |
| only | メディアクエリ非対応ブラウザからスタイルシートを隠す |
実装例
表示領域の幅が300px以上900px以下のコンピュータ・スクリーンに限って、スタイルシートを適用する場合
|
1 2 |
用する場合 <link rel="stylesheet" href="mycss.css" type="text/css" media="only screen and (min-width:300px) and (max-width:900px)"> |