CSS3メディアクエリ

CSS2のメディアタイプ

@media規則は、CSS2で説明されており、異なるメディアタイプの異なるスタイルルールのためにカスタマイズすることができます。

例えば：あなたは（ディスプレイなど、ポータブル機器、テレビなど）異なるメディアタイプごとに異なるスタイルルールを設定することができます。

しかし、十分に多くのデバイス上でマルチメディアサポートのこれらのタイプはまだ優しいです。

CSS3メディアクエリ

CSS3のマルチメディアクエリは、すべての思考のCSS2のメディアタイプを継承します。代わりに機器の種類を見つけるの、CSS3の表示設定を適応に応じました。

メディアクエリは、次のような多くのものを検出するために使用することができます。

• 幅と高さがビューポート（窓）
• 幅と装置の高さ
• （スマートフォン横画面、縦画面）に向けて。
• 解像度

現時点では、アップルの携帯電話、Android携帯電話、タブレットや他のデバイスの多くは、クエリを表示するために使用されます。

ブラウザのサポート

表中の数字は、プロパティバージョン番号をサポートする最初のブラウザを表します。

マルチメディアクエリ構文

様々なメディアによって構成されるマルチメディアのお問い合わせは、一つ以上の式を含むことができ、式が真または偽の条件に従って確立返します。

@media not|only mediatype and (expressions) {
    CSS-Code;
}

指定されたメディアタイプのマッチングデバイスタイプ場合、クエリはtrueを返し、文書照合装置内の指定したスタイルの効果が表示されます。

あなたは、オペレータまたは他の方法ではないだけを使用していない限り、すべてのスタイルは、すべてのデバイス上での表示に適応します。

• ない：@mediaは、（非印刷機器）を印刷しないような、特定のデバイスを除外するために使用されません。

• のみ：一部の特殊なメディアタイプを設定します。メディアクエリーのモバイルデバイスのサポートのみのキーワードがある場合は、モバイルデバイス向けのWebブラウザは、スタイルファイルから直接塗布した後にのみ、キーワードや表現を無視します。 メディアクエリーのための装置は、読む能力をサポートしていませんが、Webブラウザのメディアタイプタイプは、キーワードは、このスタイルファイルを無視遭遇したとき。

• すべて：すべてのデバイスが、これは常に表示されるはずです。

また、別のメディアに別のスタイルファイルを使用することができます。

CSS3のメディアタイプ

マルチメディア問い合わせの簡単な例

マルチメディアクエリを使用することを指定されたデバイス上のスタイルに対応する元のスタイルを置換するために使用することができます。

次の例では、480ピクセルの機器よりも大きな画面可視ウィンドウサイズの背景色を変更します。

次の例では、より大きな480ピクセルは、左のメニューページに浮遊する画面ウィンドウサイズで表示されます：

CSS3の@mediaリファレンス

より多くのマルチメディアコンテンツを参照することができます発見@mediaルールを。