CSS3のメディアクエリの文法構成は何ですか

メディア クエリの構文は、「@media not|only mediatype and (expressions) {CSS code...;}」です。メディア クエリは複数のメディアで構成でき、1 つ以上の式を含めることができます。式は、条件が true かどうかに応じて true または false を返します。

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

CSS3 のマルチメディア クエリは、CSS2 マルチメディア タイプの概念をすべて継承しています。デバイス タイプを探す代わりに、CSS3 は設定に従って適応的に表示します。

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

• ビューポート (ウィンドウ) の幅と高さ

• デバイスの幅と高さ

• 向き (スマートフォンの横画面、縦画面)

• 解像度

現在、Apple 携帯電話、Android 携帯電話、タブレットなどの多くのデバイスがマルチメディア クエリを使用しています。

クエリ構文

@media not|only mediatype and (expressions) {
    CSS 代码...;
 }

マルチメディア クエリはさまざまなメディアで構成され、1 つ以上の式を含めることができます。式は、条件が true の場合、true または false を返します。

#メディア タイプ

#指定されたマルチメディア タイプがデバイス タイプと一致する場合、クエリ結果は true を返し、ドキュメントは一致するデバイス上にある 指定されたスタイル効果を表示します。

not または Only 演算子が使用されない限り、すべてのスタイルはすべてのデバイスでの表示に適応します。

#値すべてprintscreen音声

説明
が使用されますすべてのメディア デバイス用
プリンタ用
コンピュータ画面、タブレット用、スマートフォンなど
スクリーンリーダー用

メディア機能

値アスペクト比#color色の数を定義します出力デバイスの各セットの原稿。カラー デバイスでない場合、値は 0color-index出力デバイスのカラー ルックアップ テーブルで定義されたエントリの数と等しくなります。カラー ルックアップ テーブルが使用されない場合、値は 0device-aspect-ratio に等しくなります。画面の表示幅と高さの比率を定義します。出力デバイス。 出力デバイスの画面に表示される高さを定義します。 出力デバイスの画面の表示幅を定義します。 出力デバイスのページの表示領域の高さを定義します。 出力デバイスの画面に表示される幅と高さの最大比率を定義します。 出力デバイスの各グループ内のカラー原稿の最大数を定義します。 出力デバイスのカラー ルックアップ テーブルのエントリの最大数を定義します。 出力デバイスの画面に表示される幅と高さの最大比率を定義します。 出力デバイスの画面に表示される最大の高さを定義します。 出力デバイスの画面の最大表示幅を定義します。 出力デバイスのページの最大表示領域の高さを定義します。 デバイスの最大解像度を定義します。 出力デバイスのページの最大表示領域幅を定義します。 出力デバイスの画面の最小表示幅を定義します。 出力デバイスの画面に表示される最小の高さを定義します。 出力デバイス内のページの最小表示領域の高さを定義します。 出力デバイスのページの最小表示領域幅を定義します。 出力デバイスのページの表示領域の高さが幅以上であるかどうかを定義します。 デバイスの解像度を定義します。例: 96dpi、300dpi、118dpcm 出力デバイスのページの表示領域の幅を定義します。 例:

説明
出力デバイスでのページの表示領域の幅と高さの比率を定義します
	#device-height
	device-width
	height
	max-aspect-ratio
	max-color
	max-color-index
	max-device-aspect-ratio
	max-device-height
	max-device-width
	max-height
	max-resolution
	max-width
	min-device-width
	min-device-height
	min-height
	min-width
	orientation
	resolution
	width

画面幅が 480px より大きく、フォント サイズが 16px に設定されているとします。

@media screen and (min-width: 480px) {
    body {
       font-size:16px;
    }
}

(学習ビデオ共有: css ビデオ チュートリアル
)

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