CSSのメディアクエリとは何ですか?使い方？

この記事ではメディアクエリとは何かについて紹介します。使い方？メディア クエリの使用方法を全員に知らせます。困っている友人は参考にしていただければ幸いです。

メディアクエリとは何ですか?用途は何ですか?

メディア クエリは、特定のメディア条件が満たされた場合にのみ CSS スタイルが適用されるように、CSS スタイルの範囲を制限します。

簡単に言えば、メディア クエリを使用すると、デバイスの特性 (ビューポートの幅、画面比率、デバイスの向き: 横または縦) に基づいてデバイス ディスプレイの CSS スタイルを設定できます。

メディア クエリを使用すると、幅、高さ、色などのメディア プロパティを検出できます。メディア クエリを使用すると、ページのコンテンツを変更せずに、特定の出力デバイスの表示効果をカスタマイズできます。 [おすすめの関連ビデオ チュートリアル: css3 チュートリアル ]

メディア クエリの使用方法?

メディア クエリは、ブラウザの if-else ステートメントとして説明できます。メディア クエリは、true または false に評価される論理式です。メディア クエリは、オプションのメディア タイプ、0 個以上のメディア属性、およびより複雑な式の構築を可能にする論理キーワードで構成されます。

1. 基本構文:

@media [not | only] <media-type> [and] (<media-condition>);

手順:

media-type

メディア タイプは、HTML ドキュメントを表示できるユーザー エージェント デバイスの広範なカテゴリです。メディア タイプのリストは、メディア クエリ レベル 4 仕様で改訂されました。非推奨のメディア タイプは有効であると認識されますが、どのデバイスとも一致しません。つまり、メディア クエリは引き続き適用されますが、メディア タイプが指定されていないかのようにすべてのデバイスに適用されます。

次のメディア タイプを設定できます:

all: すべてのデバイスに一致します。

print: プリンターと、ドキュメントをプレビューで表示する Web ブラウザーなど、印刷表示を再現するために使用されるデバイスを照合します。

screen: 印刷または音声に一致しないすべてのデバイスに一致します。

speech: ページを「読み取る」スクリーン リーダーおよび同様のデバイスと一致します。

media-condition (media-condition)

media-condition は、メディア タイプよりも詳細な単一の関数を設定します。問題のデバイス。メディア機能の構文は、機能名、コロン、テストする値など、CSS プロパティと同じです。

メディア機能のリストもメディア クエリ レベル 3 からメディア クエリ レベル 4 に変更されました。非推奨の機能は下位互換性のために仕様に残されていますが、新しいバージョンでは使用しないでください。スタイルシート。ユーザー エージェントは、指定どおりにそれらを引き続きサポートします。

次のメディア機能を設定できます:

画面/デバイス サイズ:
幅＃＃＃ 身長＃＃＃ アスペクト比＃＃＃ 向き


表示品質:

解決＃＃＃ スキャン＃＃＃ グリッド＃＃＃ 更新 オーバーフローブロック オーバーフローインライン


カラー:

色＃＃＃ color-index
モノクロ

色域

インタラクション:

ポインタ
ホバー
任意のポインタと任意のホバー

#スクリプト: スクリプト:

2. メディア クエリの使用例:

CSS 応答性メディア クエリの実装

例:

@media screen and (max-width:720px) and (min-width:320px){
      body{
       background-color:red;
       }
@media screen and (max-width:320px){
      body{
         background-color:blue;
       }
}

説明:

このメディア クエリの意味: デバイスの画面幅が 320px~~720px の場合、メディア クエリボディの背景色 (background-color: red;) を設定すると、デバイスの画面幅が 320px 未満の場合、メディア クエリでボディの背景色 (background-color: blue;) を設定できます。 )、重ね合わせる前の本体背景色と同じになります。

css @media によってクエリされたブラウザは、ページやデバイス サイズなどのメディア情報に基づいてスタイルを適用する

メソッドをサポートしています。

次のバージョンをサポートできます:

概要:

上記はこの記事の全内容です。みんなの学習に役立ちました。

以上がCSSのメディアクエリとは何ですか?使い方？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。