CSS3 マルチメディア クエリ

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

メディア クエリを使用すると、次のような多くのものを検出できます:

ビューポートの幅と高さ

デバイスの幅と高さ

向き (スマートフォンの横、縦)。

解決策

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

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

マルチメディア クエリはさまざまなメディアで構成され、条件が true かどうかに応じて 1 つ以上の式を含めることができます。

@media not|only mediatype and (expressions) {

CSS-Code;

}

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

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

not: not は、@media not print (非印刷デバイス) などの特定のデバイスを除外するために使用されます。

のみ: 特定のメディア タイプを指定するために使用されます。メディア クエリをサポートするモバイル デバイスの場合、唯一のキーワードが存在する場合、モバイル デバイスの Web ブラウザはその唯一のキーワードを無視し、次の式に基づいてスタイル ファイルを直接適用します。メディア クエリをサポートしていないがメディア タイプ Web ブラウザを読み取ることができるデバイスの場合、唯一のキーワードが見つかった場合、このスタイル ファイルは無視されます。

all: すべてのデバイス、これは頻繁に表示されます。

インスタンス 1:

rreee

インスタンス 2:

rreee