CSS3の@mediaルール

❮前次❯

例

ビューポートが480ピクセル幅以上の幅であれば、背景色を変更します。

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}

»それを自分で試してみてください

もっと"Try it Yourself"以下の例。

定義と使用法

@mediaルールは、異なるメディアタイプ/デバイスのための別のスタイルルールを定義するために使用されます。

CSS3では、メディアクエリと呼ばれながら、CSS2では、これは、メディアタイプと呼ばれました。

メディアクエリは、装置の能力を見て、多くのことをチェックするために使用することができる、など。

幅とビューポートの高さ
幅とデバイスの高さ
オリエンテーション(is the tablet/phone in landscape or portrait mode?)
解決
そして、はるかに

ブラウザのサポート

表中の数字は完全に@media規則をサポートする最初のブラウザのバージョンを指定します。

プロパティ
@media	21	9	3.5	4.0	9

CSSの構文

@media not|onlymediatype and (media feature){
CSS-Code;
}

また、別のメディアごとに異なるスタイルシートを持つことができます。

メディアの種類

値	説明
all	すべてのメディアタイプのデバイスのために使用さ
aural	推奨されていません。スピーチとサウンドシンセサイザーのために使用
braille	推奨されていません。点字触覚フィードバック装置に用いられます
embossed	推奨されていません。ページング点字プリンタ用に使用されます
handheld	推奨されていません。小さなまたはハンドヘルドデバイスに使用
print	プリンタに使用されます
projection	推奨されていません。スライドのように、投影されたプレゼンテーションで使用し
screen	コンピュータ画面、タブレット、スマートフォンなどに使用します
speech	ことをスクリーンリーダー用に使用される"reads"大声ページを
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	あたりの最大ビット数"color"モノクロオン(greyscale)デバイス
max-resolution	解像度または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	あたりのビット数の最小値"color"モノクロオン(greyscale)デバイス
min-resolution	解像度やDPCMを使用して、デバイスの最小分解能、
min-width	このようなブラウザウィンドウとして表示領域の最小幅
monochrome	あたりのビット数"color"モノクロオン(greyscale)デバイス
orientation	ビューポートの向き(landscape or portrait mode)
overflow-block	どのようにブロック軸に沿ったビューポートのオーバーフロー出力デバイスハンドルのコンテンツ(added in Media Queries Level 4)
overflow-inline	インライン軸に沿ったビューポートをオーバーフローしたコンテンツをスクロールすることができます(added in Media Queries Level 4)
resolution	解像度を使用して、出力装置の解像度、またはDPCM
scan	出力デバイスのスキャン処理
update-frequency	どのように迅速に、出力装置は、コンテンツの外観を変更することができます(added in Media Queries Level 4)
width	ビューポートの幅

その他の例

例

レスポンシブなデザインを作るために@mediaルールを使用します。

@media only screen and (max-width: 500px) {
    .gridmenu {
        width:100%;
    }

    .gridmain {
        width:100%;
    }

    .gridright {
        width:100%;
    }
}