1. Home
  2. CSS3の@mediaクエリー

CSS3の@mediaクエリー2024 年の最新の入門チュートリアル。このコースでは 例,定義と使用,ブラウザのサポート,CSSの構文,メディアタイプ,メディア機能,より多くの例,例,関連ページ, について学習できます。

CSS3の@mediaクエリー

例

文書が未満300ピクセル幅場合、背景プレゼンテーション（背景色）を変更することです：

@media画面と（最大幅： 300ピクセル）{
体{
背景色：水色。
}
}

»をお試しください

定義と使用

あなたは異なるメディアタイプごとに異なるスタイルを定義することができ、@mediaクエリを使用してください。

@mediaは、別の画面を設定することができますが、メディアは非常に有用である@、設計応答ページを設定する必要がある場合は特に、さまざまなスタイルのサイズ。

あなたは、プロセスのブラウザのサイズをリセットすると、ページがブラウザの幅と高さに基づいて再レンダリングページになります。

ブラウザのサポート

表中の数字は、最初のブラウザのバージョン番号を規則@mediaサポートを示します。

ルール
@media 21 9 3.5 4.0 9

CSSの構文

@media MEDIATYPEと|ない|のみ（メディア機能）{
CSS-コード;
}

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

<リンクのrel = "スタイルシート"メディア= "MEDIATYPEと|ない|のみ（メディア機能）"のhref = "mystylesheet.css">

メディアタイプ

値 説明
すべて すべてのデバイスの
聴覚の 廃止されました。 会話や音声合成のための
点字 廃止されました。 タッチフィードバックに使用される点字機器
エンボス 廃止されました。 印刷用ブラインド印刷装置
ハンドヘルドの 廃止されました。 このようなPDAや小さな電話などの携帯機器や小型のデバイスについては、
印刷 プリンタと印刷プレビューのための
投影 廃止されました。 投影機器用
画面 コンピュータ画面、タブレットPC、スマートフォンなどのため。
スピーチ スクリーンリーダーやその他の音響機器に適用されます
TTY 廃止されました。 このような電報、端末機器およびポータブルデバイスの限られた文字として、文字グリッドを固定します
テレビ 廃止されました。 テレビとWebテレビのための

メディア機能

値 説明
アスペクト比 高さ比にページ幅の可視領域内の出力デバイスを定義します
カラー 各グループ内のカラー原稿の数を出力デバイスを定義します。 それはカラーデバイスでない場合、値は0に等しいです。
カラーインデックス カラールックアップテーブル内のエントリの数は、出力デバイスに定義されています。 あなたはカラールックアップテーブルを使用しない場合、値は0に等しいです。
デバイスアスペクト比 高比幅可視画面定義出力装置。
デバイスの高さ 画面定義出力デバイス見える高さ。
デバイス幅 画面定義出力デバイス表示幅。
グリッド 出力装置は、グリッドまたは格子かどうかを照会するために使用します。
高さ ページの高さの可視領域で出力デバイスを定義します。
最大アスペクト比 画面定義出力装置の高さに対する幅の可視最大比。
最大色 出力デバイスの最大数をカラー原稿の各セットを定義します。
MAX-カラーインデックス カラールックアップテーブル内のエントリの最大数は、出力デバイスに定義されています。
MAX-デバイスアスペクト比 画面定義出力装置の高さに対する幅の可視最大比。
MAX-デバイスの高さ 画面には、最大の高さに見える出力デバイスを定義します。
MAX-デバイス幅 画面定義出力デバイスの最大表示幅。
最大の高さ ページの最大の高さの可視領域で出力デバイスを定義します。
MAX-モノクロ 画素毎含まモノクロ原稿の最大数である単色フレームバッファ内に定義されています。
最大解像度 最大解像度は、デバイスを定義します。
最大幅 ページの最大幅の可視領域で出力デバイスを定義します。
分アスペクト比 幅と高さのページ可視最小比の領域で出力デバイスを定義します。
分色 出力デバイスにカラー原稿の各設定最小数を定義します。
分カラーインデックス カラールックアップテーブルのエントリの最小数は、出力デバイスに定義されています。
分-デバイスアスペクト比 画面は高さ、幅の出力デバイスの可視最小比率を定義します。
分-デバイス幅 画面出力デバイスは、最小表示幅を定義しました。
分 - デバイスの高さ 最小値は、出力デバイスの画面見える高さを定義します。
分の高さ ページの最小の高さの可視領域で出力デバイスを定義します。
分、モノクロ カラー原稿の最小数は、単色フレームバッファに定義されている画素毎に含まれてい
分解像度 最小分解能は、デバイスを定義します。
分幅 ページの最小幅の可視領域で出力デバイスを定義します。
モノクロ モノクロームフレームバッファ内に定義されているが、画素モノクロ元の番号ごとに含まれています。 それはモノクロデバイスでない場合、値は0に等しいです。
オリエンテーション ページ高さの可視領域内の出力デバイスを定義する幅以上です。
解像度 デバイスの解像度を定義します。 以下のような：96DPI、300dpiの、118dpcm
スキャン 機器のプロセス定義テレビの種類をスキャンします。
幅 ページ幅の可視領域で出力デバイスを定義します。

例

より多くの例

例

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

唯一の画面と@media（最大幅 ：500pxなど）{
.gridmenu {
幅：100％;
}

.gridmain {
幅：100％;
}

.gridright {
幅：100％;
}
}

»をお試しください

関連ページ

CSSチュートリアル： CSSメディアタイプ

ホットチュートリアル

お問い合わせ

CSS3の@mediaクエリー
10/30