CSS3 マルチメディア クエリ
CSS3 マルチメディア クエリ
CSS2 マルチメディア タイプ
@media ルールは CSS2 で導(dǎo)入されており、メディア タイプごとに異なるスタイル ルールをカスタマイズできます。
例: メディアの種類 (モニター、ポータブル デバイス、テレビなど) ごとに異なるスタイル ルールを設(shè)定できます。
しかし、これらのマルチメディア タイプは、多くのデバイスでサポートできるほどフレンドリーではありません。
CSS3 マルチメディア クエリ
CSS3 マルチメディア クエリは、CSS2 マルチメディア タイプのアイデアをすべて継承しています。デバイスのタイプを探す代わりに、設(shè)定に従って CSS3 適応表示します。
メディア クエリを使用すると、次のような多くのことを検出できます:
ビューポートの幅と高さ、デバイスの幅と高さの向き (スマートフォンの橫向き、縦向き)。解決策
現(xiàn)在、Apple 攜帯電話、Android 攜帯電話、タブレットなどの多くのデバイスがマルチメディア クエリを使用しています。
マルチメディア クエリ構(gòu)文
マルチメディア クエリはさまざまなメディアで構(gòu)成され、條件が true かどうかに応じて 1 つ以上の式を含めることができます。
@media not|only mediatype and (expressions) {
CSS-Code;
}
指定されたマルチメディア タイプがデバイス タイプと一致する場(chǎng)合、クエリ結(jié)果は true を返し、ドキュメントには指定されたスタイル効果が表示されます。マッチング裝置。
not または Only 演算子を使用しない限り、すべてのスタイルはすべてのデバイスでの表示に適応します。
not: not は、@media not print (非印刷デバイス) などの特定のデバイスを除外するために使用されます。
のみ: 特定のメディア タイプを指定するために使用されます。メディア クエリをサポートするモバイル デバイスの場(chǎng)合、唯一のキーワードが存在する場(chǎng)合、モバイル デバイスの Web ブラウザはその唯一のキーワードを無(wú)視し、次の式に基づいてスタイル ファイルを直接適用します。メディア クエリをサポートしていないがメディア タイプ Web ブラウザを読み取ることができるデバイスの場(chǎng)合、唯一のキーワードが見(jiàn)つかった場(chǎng)合、このスタイル ファイルは無(wú)視されます。
all: すべてのデバイス、これは頻繁に表示されます。
異なるメディア上で異なるスタイル ファイルを使用することもできます:
CSS3マルチメディアタイプ
Valueマルチメディアタイプの機(jī)器 音聲はスクリーン リーダーに使用されます
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
background-color: pink;
}
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
<h1>重置瀏覽器窗口查看效果！</h1>
<p>如果媒體類型屏幕的可視窗口寬度小于 480 px ，背景顏色將改變。</p>
</body>
</html>
