CSSメモ: メディアクエリ

メディアクエリとは、メディアタイプを拡張して、デバイスに関する条件により適用するスタイルシートの選択を可能にする、CSS3で拡張される概念。@media規則、@import規則、<?xml-stylesheet?>擬似命令、(X)HTMLのlink要素、style要素のmedia属性に記述される。

すべて非対応 (156716)。

一覧

機能	書式	仕様	対応				メモ
機能	書式	仕様	1.0	1.5	2	3	メモ
`width` `max-width` `min-width`	`<length>`	3 (Media Queries)	×
`height` `max-height` `min-height`	`<length>`	3 (Media Queries)	×
`device-width` `max-device-width` `min-device-width`	`<length>`	3 (Media Queries)	×
`device-height` `max-device-height` `min-device-height`	`<length>`	3 (Media Queries)	×
`device-aspect-ratio` `max-device-aspect-ratio` `min-device-aspect-ratio`	`<integer>` / `<integer>`	3 (Media Queries)	×				縦横比を分数で。仮分数も可。
`color` `max-color` `min-color`	`<integer>`	3 (Media Queries)	×				モノクロデバイスなら "`0`"、カラーならその色のビット数。
`color-index` `max-color-index` `min-color-index`	`<integer>`	3 (Media Queries)	×				色数。
`monochrome` `max-monochrome` `min-monochrome`	`<integer>`	3 (Media Queries)	×				カラーデバイスなら "`0`"、モノクロならその階調のビット数。
`resolution` `max-resolution` `min-resolution`	`<integer>`	3 (Media Queries)	×				画面解像度。dpi値かdpcm値。
`scan`	`progressive` \| `interlace`	3 (Media Queries)	×
`grid`	`<integer>`	3 (Media Queries)	×				通常値を取らない。キャラクタベースの時 "`1`"、それ以外なら "`0`"。

関連リンク