| ルール名 | @media |
|---|---|
| 構文 |
@media ( condition ) [and ( condition )]... [, ...]
@media media_type [and ( condition )]... [, ...]
|
@media により、スタイルシートを適用する条件を指定することができます。例えば、スマートフォンサイズの場合と、PCディスプレイサイズの場合で、適用するスタイルシートを変更することができます。
出力の対象メディアを指定します。下記の例では、em要素を、ディスプレイ(screen)の場合は赤色、印刷(print)の場合は太字で出力します。
@media screen {
em { color: red; }
}
@media print {
em { font-weight: bold; }
}
メディアタイプには下記などがあります。screen と print 以外はまだ対応ブラウザは少ないようです。
@media に続けて、下記の様に条件を記述することもできます。条件には and と not を指定できます。カンマ(,)は or の意味になります。
/* 幅が 767px 以下であれば */
@media (max-width:767px) { ... }
/* 幅が 768px 以上であれば */
@media (min-width:768px) { ... }
/* 幅が 768px以上 1200px以下であれば */
@media (min-width:768px) and (max-width:1200px) { ... }
/* カラーディスプレイまたはモノクロ印刷であれば */
@media screen and (color), print and (monochrome) { ... }
条件には下記などの属性を指定することができます。(min-/max-) とあるものは、min-width, max-width などのように最少/最大のプレフィックスをつけることができます。
| 特性 | min-/max- | 説明 |
|---|---|---|
| width | ○ | 表示の横幅。連続メディアの場合はスクロールバーを含むビューポートの横幅。ページ型メディアの場合はページボックスの横幅。 |
| height | ○ | 表示の高さ。連続メディアの場合はスクロールバーを含むビューポートの高さ。ページ型メディアの場合はページボックスの高さ。 |
| device-width | ○ | 表示の横幅。連続メディアの場合は画面の横幅。ページ型メディアの場合はページシートの横幅。 |
| device-height | ○ | 表示の高さ。連続メディアの場合は画面の高さ。ページ型メディアの場合はページシートの高さ。 |
| orientation | height が width より大きければ portrait、さもなくば landscape。 | |
| aspect-ratio | ○ | height に対する width の比率。 |
| device-aspect-ratio | ○ | device-height に対する device-width の比率。 |
| color | ○ | カラーコンポーネントのビット数。カラーでない場合は 0。 |
| color-index | ○ | カラー参照テーブルの項目数。 |
| monochrome | ○ | 白黒デバイスの1ピクセルあたりのビット数。カラー端末の場合は 0。 |
| resolution | ○ | 解像度(例:300spi)。 |
| scan | TVの走査方式。progressive など。 | |
| grid | TTY や電話ディスプレイなどの固定文字幅グリッド端末であれば 1、さもなくば 0。 |
/* 横幅が 767px 以下であれば */
@media (max-width:767px) { ... }
/* 高さが 600px 以上であれば */
@media (min-height: 600px) { ... }
/* 画面が縦長であれば */
@media (orientation: portrait) { ... }
/* カラー端末であれば */
@media (color) { ... }
/* モノクロ端末であれば */
@mdeia (monochrome) { ... }
/* 解像度が 300dpi 以上であれば */
@media (min-resolution: 300dpi) { ... }
Internet Explorer 8 はメディアクエリに対応していませんが、下記を利用することで擬似的にメディアクエリを実現することができます。
<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->