ビューポートの幅が 480 ピクセル以上の場合は背景色を変更します：
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
Try it Yourself ❯
他の "Try it Yourself" 例が下にあります。
@media 規則は、異なるメディアタイプ/デバイスのために異なるスタイル規則を定義するために使用します。
これは、CSS2 ではメディア・タイプと呼ばれましたが、CSS3 ではメディア・クエリと呼ばれます。
メディア・クエリは、デバイスの能力を見て、次のような多くのことを確認するために使われています：
表中の数字は、完全に @media 規則をサポートする最初のブラウザのバージョンを指定しています。
| プロパティ | |||||
|---|---|---|---|---|---|
| @media | 21 | 9 | 3.5 | 4.0 | 9 |
@media not|only mediatype and (media feature) {
CSS-Code;
}
異なるメディアごとに異なるスタイルシートを持つこともできます：
<link rel="stylesheet" media="mediatype and|not|only (media
feature)"
href="mystylesheet.css">
| 値 | 説明 |
|---|---|
| all | すべてのメディアタイプのデバイスに使用します |
| aural | 非推奨。 スピーチおよびサウンド・シンセサイザーに使用します |
| braille | 非推奨。 点字触覚フィードバック装置に使用します |
| embossed | 非推奨。 ページング点字プリンタ用に使用します |
| handheld | 非推奨。 小型またはハンドヘルドデバイスに使用します |
| プリンタに使用します | |
| projection | 非推奨。 スライドのような、投影用のプレゼンテーションで使用します |
| screen | コンピュータ画面、タブレット、スマートフォンなどに使用します |
| speech | 大きな声でページを「読み上げる」スクリーンリーダーに使用します |
| tty | 非推奨。 テレタイプや端末のような、固定ピッチの文字グリッドを使用するメディアに使用します |
| tv | 非推奨。 テレビ型デバイスに使用します |
| 値 | 説明 |
|---|---|
| aspect-ratio | ビューポートの幅と高さの比 |
| color | 出力デバイスの色を構成するビット数 |
| color-index | デバイスが表示できる色の数 |
| device-aspect-ratio | デバイスの幅と高さの比 |
| device-height | コンピュータ画面などのデバイスの高さ |
| device-width | コンピュータ画面などのデバイスの幅 |
| grid | デバイスは、グリッドかビットマップか |
| height | ビューポートの高さ |
| max-aspect-ratio | 表示領域の幅と高さの最大比 |
| max-color | 出力デバイスの色を構成するビットの最大数 |
| max-color-index | デバイスが表示できる色の最大数 |
| max-device-aspect-ratio | デバイスの幅と高さの最大比 |
| max-device-height | コンピュータ画面などのデバイスの最大の高さ |
| max-device-width | コンピュータ画面などのデバイスの最大幅 |
| max-height | コンピュータ画面などのデバイスの最大の高さ |
| max-monochrome | モノクロ（グレースケール）デバイスの「色」あたりのビットの最大数 |
| max-resolution | dpi または dpcm を使用したデバイスの最大解像度 |
| max-width | ブラウザウィンドウなどの表示領域の最大幅 |
| min-aspect-ratio | 表示領域の幅と高さの最小比 |
| min-color | 出力デバイスの色を構成するビットの最小数 |
| min-color-index | デバイスが表示できる色の最小数 |
| min-device-aspect-ratio | デバイスの幅と高さの最小比 |
| min-device-width | コンピュータ画面などのデバイスの最小幅 |
| min-device-height | コンピュータ画面などのデバイスの最小の高さ |
| min-height | コンピュータ画面などのデバイスの最小の高さ |
| min-monochrome | モノクロ（グレースケール）デバイスの「色」あたりのビットの最小数 |
| min-resolution | dpi または dpcm を使用したデバイスの最小解像度 |
| min-width | ブラウザウィンドウなどの表示領域の最小幅 |
| monochrome | モノクロ（グレースケール）デバイスの「色」あたりのビット数 |
| orientation | ビューポートの向き（ランドスケープ・モードかポートレートモード） |
| overflow-block | ブロック軸に沿ってビューポートからオーバフローしたコンテンツを、出力装置がどのように処理するか（メディア・クエリ・レベル 4 で追加されました） |
| overflow-inline | インライン軸に沿ってビューポートからオーバーフローしたコンテンツをスクロールすることができます（メディア・クエリ・レベル 4 で追加されました） |
| resolution | dpi または dpcm を使用したデバイスの解像度 |
| scan | 出力デバイスのスキャン処理 |
| update-frequency | 出力デバイスがコンテンツの外観をどれくらい速く変更することができるか（メディア・クエリ・レベル 4 で追加されました） |
| width | viewport width |
レスポンシブ・デザインにするため @media 規則を使用します：
@media only screen and (max-width: 500px) {
.gridmenu
{
width:100%;
}
.gridmain
{
width:100%;
}
.gridright {
width:100%;
}
}
Try it Yourself ❯
CSS チュートリアル： CSS Media Queries