CSS3 マルチメディア クエリ
CSS3 マルチメディア クエリ
CSS2 マルチメディア タイプ
@media ルールは CSS2 で導入されており、メディア タイプごとに異なるスタイル ルールをカスタマイズできます。
例: メディアの種類 (モニター、ポータブル デバイス、テレビなど) ごとに異なるスタイル ルールを設定できます。
しかし、これらのマルチメディア タイプは、多くのデバイスでサポートできるほどフレンドリーではありません。
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: すべてのデバイス、これは頻繁に表示されます。
異なるメディアで異なるスタイル ファイルを使用することもできます:
CSS3 マルチメディアタイプ
| 値 | 説明 すべてのマルチメディアタイプデバイス用 |
|---|---|
| all | プリンター用コンピューター画面の場合は |
| screen | 、タブレット、スマートフォンなど |
| スピーチ | スクリーンリーダー用 |
マルチメディアクエリを使用すると、元のスタイルを指定したデバイス上の対応するスタイルに置き換えることができます。 次の例では、画面表示可能なウィンドウ サイズが 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>プログラムを実行して試してください
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.wrapper {overflow:auto;}
#main {margin-left: 4px;}
#leftsidebar {float: none;width: auto;}
#menulist {margin:0;padding:0;}
.menuitem {
background:#CDF0F6;
border:1px solid #d4d4d4;
border-radius:4px;
list-style-type:none;
margin:4px;
padding:2px;
}
@media screen and (min-width: 480px) {
#leftsidebar {width:200px;float:left;}
#main {margin-left:216px;}
}
</style>
</head>
<body>
<div class="wrapper">
<div id="leftsidebar">
<ul id="menulist">
<li class="menuitem">Menu-item 1</li>
<li class="menuitem">Menu-item 2</li>
<li class="menuitem">Menu-item 3</li>
<li class="menuitem">Menu-item 4</li>
<li class="menuitem">Menu-item 5</li>
</ul>
</div>
<div id="main">
<h1>重置浏览器窗口查看效果！</h1>
<p>在屏幕可视窗口尺寸小于 480 像素时将菜单浮动到页面左侧。</p>
</div>
</div>
</body>
</html>プログラムを実行して試してください
- おすすめコース
- コースウェアのダウンロード
現時点ではコースウェアはダウンロードできません。現在スタッフが整理中です。今後もこのコースにもっと注目してください〜 