CSS3 マルチメディア クエリ
CSS2 マルチメディア タイプ
@media ルールは CSS2 で導入され、メディア タイプごとに異なるスタイル ルールをカスタマイズできます。
例: メディアの種類 (モニター、ポータブル デバイス、テレビなど) ごとに異なるスタイル ルールを設定できます。
しかし、これらのマルチメディア タイプは、多くのデバイスでサポートできるほどフレンドリーではありません。
CSS3 マルチメディア クエリ
CSS3 マルチメディア クエリは、CSS2 マルチメディア タイプのアイデアをすべて継承しています。デバイスのタイプを探す代わりに、設定に従って CSS3 適応表示します。
メディア クエリを使用すると、次のようなさまざまなものを検出できます。
ビューポート (ビューポート) の幅と高さ
デバイスの幅と高さ
方向 (スマートフォンの横、縦) など。
解決策
現在、Apple 携帯電話、Android 携帯電話、タブレットなどの多くのデバイスがマルチメディア クエリを使用しています。
ブラウザのサポート
表内の数字は、この属性をサポートする最初のブラウザのバージョン番号を示します。
マルチメディア クエリ構文
マルチメディア クエリはさまざまなメディアで構成されており、条件が true であるかどうかに応じて、式には true または false が返されます。
@media not|only mediatype and (expressions) {
CSS-Code;
}指定されたマルチメディア タイプがデバイス タイプと一致する場合、クエリ結果は true を返し、ドキュメントは一致するデバイス上で指定されたスタイル効果を表示します。
not または Only 演算子を使用しない限り、すべてのスタイルはすべてのデバイスでの表示に適応します。
not: not は、@media not print (非印刷デバイス) などの特定のデバイスを除外するために使用されます。
のみ: 特別なメディアタイプを指定するために使用されます。メディア クエリをサポートするモバイル デバイスの場合、唯一のキーワードが存在する場合、モバイル デバイスの Web ブラウザはその唯一のキーワードを無視し、次の式に基づいてスタイル ファイルを直接適用します。メディア クエリをサポートしていないがメディア タイプ Web ブラウザを読み取ることができるデバイスの場合、唯一のキーワードが見つかった場合、このスタイル ファイルは無視されます。
all: すべてのデバイス、これは頻繁に表示されるはずです。
異なるメディアで異なるスタイル ファイルを使用することもできます:
CSS3 Multimedia Type
| Value | Description |
|---|---|
| all | すべてのマルチメディア タイプのデバイス用 |
| 印刷 | プリンター用 |
| 画面用 | コンピューター画面、タブレット、スマートフォンなど用 |
| スピーチ | スクリーンリーダー用 |
マルチメディア クエリの簡単な例
マルチメディア クエリを使用すると、対応するスタイルを使用して、指定したデバイス上の元のスタイルを置き換えることができます。
次の例では、画面表示可能なウィンドウ サイズが 480 ピクセルを超えるデバイスの背景色を変更します。オンラインの例
次の例は、画面に表示可能なウィンドウ サイズが 480 ピクセルを超える場合、メニューをページの左側にフロートさせます:
インスタンス<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<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>インスタンスの実行»「インスタンスの実行」をクリックします" ボタンをクリックしてオンラインの例を表示します
