メディアクエリについて調べていました。 Ardor(@ArdorOnline)です。 CSS3から特性の指定ができるようになり細かく制御できるようになりました。 ここで一度整理しておきます。
メディアクエリ
メディアクエリは次の形式で指定ができるCSSです。
@media メディアタイプ { 設定 }
@media メディアタイプ and ( 特性 ) { 設定 }
特にCSS3からは「特性」の指定ができるようになりました。 特性には様々な条件を指定することができ、より細かく制御することができます。
メディアタイプ一覧
次の一覧は、メディアタイプについてです。
どのメディアに対してスタイルを指定するのかを決定します。
| メディアタイプ | メディアの種類 |
|---|---|
| all | すべてのメディア |
| screen | スクリーン |
| 印刷 | |
| handheld | モバイル機器 |
| projection | プロジェクタ |
| tv | テレビ |
| tty | 文字幅固定のデバイス |
| braille | 点字ディスプレイ |
| embossed | 点字プリンタ |
| speech | 音声 |
| aural | 音声(CSS2) |
特性一覧
次の一覧は、特性についてです。
メディアタイプに対して条件を追加できます。
| 特性 | 条件 | 値 |
|---|---|---|
| width | 表示領域の横幅 | 数値 |
| height | 表示領域の高さ | 数値 |
| device-width | スクリーンの横幅 | 数値 |
| device-height | スクリーンの高さ | 数値 |
| aspect-ratio | 表示領域の縦横比。「横/縦」(1/2)という形式で指定 | 縦横比 |
| device-aspect-ratio | スクリーン領域の縦横比。「横/縦」(1/2)という形式で指定 | 縦横比 |
| color | 各色のビット数。パラメータ省略時はすべてのカラーデバイスに適合 | 整数(省略可能) |
| color-index | カラーテーブルのエントリ数。パラメータ省略時はすべてのカラーテーブルに適合 | 整数(省略可能) |
| monochrome | 階調のビット数。パラメータ省略時はすべてのモノクロームデバイスに適合 | 整数(省略可能) |
| resolution | 解像度。単位は「dpi」または「dpcm」で指定 | 解像度 |
| orientation | デバイスの向き。縦長(portrait)または横長(landscape) | portrait / landscape |
| scan | 走査方式。プログレッシブ(progressive)またはインターレース(interlace) | progressive / interlace |
| grid | tty端末のグリッドベースのデバイス(1)またはそれ以外(0) | 1 / 0 |
| max-width | 表示領域の最大横幅 | 数値 |
| max-height | 表示領域の最大高さ | 数値 |
| max-device-width | スクリーンの最大横幅 | 数値 |
| max-device-height | スクリーンの最大高さ | 数値 |
| max-aspect-ratio | 表示領域の最大縦横比。「横/縦」(1/2)という形式で指定 | 縦横比 |
| max-device-aspect-ratio | スクリーン領域の最大縦横比。「横/縦」(1/2)という形式で指定 | 縦横比 |
| max-color | 各色の最大ビット数。パラメータ省略時はすべてのカラーデバイスに適合 | 整数(省略可能) |
| max-color-index | カラーテーブルの最大エントリ数。パラメータ省略時はすべてのカラーテーブルに適合 | 整数(省略可能) |
| max-monochrome | 階調の最大ビット数。パラメータ省略時はすべてのモノクロームデバイスに適合 | 整数(省略可能) |
| max-resolution | 最大解像度。単位は「dpi」または「dpcm」で指定 | 解像度 |
| min-width | 表示領域の最小横幅 | 数値 |
| min-height | 表示領域の最小高さ | 数値 |
| min-device-width | スクリーンの最小横幅 | 数値 |
| min-device-height | スクリーンの最小高さ | 数値 |
| min-aspect-ratio | 表示領域の最小縦横比。「横/縦」(1/2)という形式で指定 | 縦横比 |
| min-device-aspect-ratio | スクリーン領域の最小縦横比。「横/縦」(1/2)という形式で指定 | 縦横比 |
| min-color | 各色の最小ビット数。パラメータ省略時はすべてのカラーデバイスに適合 | 整数(省略可能) |
| min-color-index | カラーテーブルの最小エントリ数。パラメータ省略時はすべてのカラーテーブルに適合 | 整数(省略可能) |
| min-monochrome | 階調の最小ビット数。パラメータ省略時はすべてのモノクロームデバイスに適合 | 整数(省略可能) |
| min-resolution | 最小解像度。単位は「dpi」または「dpcm」で指定 | 解像度 |
最後に
こうやって一覧化してみると結構な種類があります。
私的なメモ記事になってしまってすみません。
最後までお読み頂きありがとうございます。
0 件のコメント:
コメントを投稿