@media screen and (max-width: 600px) {
.body{
background-color:lightblue;
}
}
上記のコードの関数である:原稿幅が背景色(背景色)を変更未満600個のピクセルである場合。
@media screen and (min-width:960px) and (max-width:1200px){
body{background:yellow;}
}
コードは、ブラウザの幅を表し、より少ない又は960ピクセル幅1200px使用スタイルに等しいです。
定義と使用
@mediaクエリを使用して、あなたは異なるメディアタイプごとに異なるスタイルを定義することができます。@mediaメディアは非常に便利です@あなたが、応答ページを設計する必要がある場合は特に、異なる画面サイズごとに異なるスタイルを設定することができます。
あなたは、プロセスのブラウザのサイズをリセットすると、ページがブラウザの幅と高さに応じてページを再レンダリングされます。
CSSの構文
@media mediatype and|not|only (media feature) {
CSS-Code;
}
また、別のために別のメディアを使用することができます スタイルシート :
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
(メディアタイプ)MEDIATYPE値:
値 | 説明 |
---|---|
すべて | すべてのデバイスの |
聴覚の | 廃止されました。音声と音声合成のための |
点字 | 廃止されました。点字は、タッチフィードバック装置を適用しました |
エンボス | 廃止されました。印刷用ブラインドの印刷装置 |
ハンドヘルド | 廃止されました。そのようなPDAや小さな電話などの小さなハンドヘルドデバイス、またはデバイスについては、 |
プリント | プリンタや印刷プレビューのために |
投影 | 廃止されました。投影装置 |
画面 | コンピュータ画面、タブレットPC、携帯電話の場合のみ |
スピーチ | スクリーンリーダーやその他の音響機器に適用されます |
TTY | 廃止されました。固定文字グリッドのための |
テレビ | 廃止されました。テレビやインターネットTV用 |
メディア機能(メディア機能)
値 | 説明 |
---|---|
アスペクト比 | の高さの比幅の出力デバイスページ可視領域の定義 |
色 | カラー原稿の各グループの出力デバイスの数を定義します。デバイスがカラーでない場合、値は0に等しいです。 |
カラーインデックス | 出力デバイスでのカラールックアップテーブルのエントリ数を定義します。あなたはカラールックアップテーブルを使用しない場合、値は0に等しく、 |
デバイスアスペクト比 | 高比出力装置は表示画面定義幅。 |
デバイスの高さ | 視認性の高い画面定義出力装置。 |
デバイス幅 | 可視画面定義出力デバイス幅。 |
グリッド | グリッドや格子を使用して出力デバイスかどうかを照会するために使用。 |
高さ | ページの出力デバイス非常に目に見える領域の定義。 |
最大アスペクト比 | 最大の高さの比可視画面定義出力デバイス幅。 |
MAX-色 | カラー原稿の各グループの出力デバイスの最大数を定義します。 |
MAX-カラーインデックス | これは、出力デバイスにカラールックアップテーブル内のエントリの最大数を定義します。 |
MAX-デバイスアスペクト比 | 最大の高さの比可視画面定義出力デバイス幅。 |
MAX-デバイスの高さ | 最大の高さに見える画面定義出力デバイス。 |
MAX-デバイス幅 | 出力装置の画面定義最大可視幅。 |
最大の高さ | ページの可視領域の最大高さは、出力デバイスに定義されています。 |
MAX-モノクロ | 最大数は、各画素に含まれるモノクロオリジナル単色フレームバッファ内に定義されています。 |
最大解像度 | デバイスの最大解像度が定義されています。 |
最大幅 | ページの最大幅の可視領域内の出力デバイスの定義。 |
分アスペクト比 | 幅と高さの出力デバイスページ可視領域の最小比の定義。 |
分色 | 出力デバイスの各グループは、カラー原稿の最小数を定義しました。 |
分カラーインデックス | 出力デバイスでのカラールックアップテーブルのエントリの最小数を定義します。 |
MIN-デバイスアスペクト比 | 出力装置高さに対する幅の目に見える画面定義最小比。 |
分-デバイス幅 | 出力装置の画面定義最小可視幅。 |
MIN-デバイスハイト | 最小画面出力装置は、非常に目に見える定義しました。 |
分の高さ | ページの最小の高さの可視領域内の出力デバイスの定義。 |
分、モノクロ | モノクロ原稿の最小数が含まれる画素フレームバッファ毎に単一色で定義されています |
分解像度 | 最小分解能は、デバイスを定義しました。 |
最小幅 | ページの最小幅の可視領域内の出力デバイスの定義。 |
モノクローム | 含まれる各画素のためのモノクロ原単色フレームバッファの数を定義します。デバイスが単色でない場合、値は0に等しいです。 |
オリエンテーション | ページの高さの可視領域内の出力デバイスの定義は、幅(縦画面)以上です。 |
解決 | デバイスの解像度を定義します。以下のような:96DPI、300dpiの、118dpcm |
スキャン | プロセス定義テレビ型走査装置。 |
幅 | ページ幅の可視領域での出力デバイスの定義。 |