CSS3メディアクエリの構文キーワードは何ですか

css3 メディア クエリの構文キーワードは「@media」です。これにより、ページにさまざまなメディア条件を設定し、条件に従って対応するスタイルを適用できます。基本的な構文形式は「@media mediatype and|not|」です。のみ(メディア機能) {CSS コード;}」。

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

メディア クエリ (メディア クエリ) は、CSS3 で提案された新しい概念で、ページにさまざまなメディア条件を設定し、条件に応じて対応するスタイルを適用することができます。

css3 メディア クエリの構文キーワードは「@media」です。

@media は、さまざまな画面サイズに応じてさまざまなスタイルを設定できます。特に応答性の高いページを設定する必要がある場合、@media は非常に便利です。

ブラウザのサイズをリセットすると、ブラウザの幅と高さに基づいてページも再レンダリングされます。

構文:

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

only は、クエリ結果全体を制限するために使用され、クエリ結果全体を否定するために使用されません。キーワードを使用しない場合、またはキーワードのみを使用する場合は、メディア タイプを明示的に指定する必要があり、キーワードはメディア クエリ ステートメント全体の先頭にある必要があります。

1) および

#キーワード および は、メディア タイプの表現と複数のメディア特性を同じメディア クエリに組み合わせるために使用されます。クエリの結果は、メディア タイプと各式の結果が true の場合にのみ true になります。例:

screen and (min-width: 700px) and (orientation: landscape)

メディア クエリの結果はブール値 (true または false) です。および 接続のすべての部分が true である場合にのみ、メディア クエリ ステートメント全体の結果が true になります。

メディア クエリは、ブラウザへの質問と考えることもできます。上記のメディア クエリは、最初に「モニターですか?」と尋ねます。ブラウザが「はい」と答えると、続けて「最小幅は 700 ピクセルですか?」と尋ねます。ブラウザが「はい」と答えると、引き続き質問されます。 「画面は横向きですか?」と尋ねます。 3 つの質問すべてに対する答えが「はい」の場合にのみ、メディア クエリ ステートメント全体の結果が true になります。

2)only

キーワードのみは、クエリ結果全体に適用される範囲を制限するために使用されます。例:

only screen and (color)

はカラー ディスプレイ デバイスでのみ有効で、他のデバイスでは無効です。これは次と同等です:

not (screen and (color))

3) not

キーワード not は、クエリ結果全体を否定するために使用されます。例:

not (screen and (monochrome))

は、モノクロ表示デバイスを除くすべてのデバイスを意味します。これは、

not (screen and (monochrome))

ではなく、

(not screen) and (monochrome)

と同等です。単一のクエリに加えて、カンマで区切られたメディア クエリのリストを定義することもできます。リスト内のいずれかのメディア クエリの結果が true の場合、メディア クエリ リストの結果は true になり、それ以外の場合、メディア クエリ リストの結果は false になります。

メディア クエリ リスト内の各クエリは互いに独立しており、1 つのクエリの演算子は他のメディア クエリに影響を与えません。したがって、メディア クエリ リストは、さまざまなメディア タイプおよびメディア属性で動作できます。例:

(min-width: 700px), handheld and (orientation: landscape)

上記のメディア クエリ リストには 2 つのメディア クエリが含まれています。最小幅 700 ピクセルのデバイス、または水平画面のハンドヘルド デバイスの場合、メディア クエリ リストの結果は true です。それ以外の場合は false になります。

メディア クエリを使用すると、応答性の高いレイアウトを構築できます。メディア クエリを使用するには 2 つの方法があります: 1 つは @media ルールを使用して、異なる CSS コードのロードを選択する方法、もう 1 つは、 タグの media 属性を使用して、異なるスタイル シート ファイルのロードを選択する方法です。

メディア クエリを設定します

1) @media ルールを使用します

@media ルールを使用します。同じ CSS ファイル内で、メディアの状態に応じて異なるスタイルを定義します。ユーザーが Web ページを閲覧すると、ブラウザはメディア クエリの結果に基づいて適用する CSS コードを選択します。

@media ルールの構文は @media の後にあり、その後にメディア タイプとメディア特性が続き、その後、対応するスタイル ルールが定義されている 1 対の中括弧が続きます。例:

@media screen and (max-device-width: 480px) { 
 /* 如果设备宽度 <= 480px，将会应用这里的 CSS 代码 */
}
@media screen and (max-width: 768px) { 
 /* 如果视口宽度 <= 768px，将会应用这里的 CSS 代码 */
}

スタイルのカスケードの性質に従って、スタイル シート内で後から定義されたスタイルは、以前の同じスタイルを上書きします。したがって、すべてのデザインに適応するようにスタイル シートの先頭で基本スタイルを定義し、メディア クエリを使用して対応する部分を書き換えて、メディアの状態が異なると異なるスタイル ルールが適用されるようにすることができます。

2) タグの media 属性を使用する

タグの media 属性を使用する場合は、メディアごとに異なるスタイルを定義します。条件テーブル ファイルを使用すると、ブラウザはメディア クエリの結果に基づいてさまざまなスタイル シート ファイルをロードします。

<link rel="stylesheet" media="screen" href="reset.css">
<link rel="stylesheet" media="screen and (max-width: 480px)" href="phone.css">
<link rel="stylesheet" media="screen and (min-width: 768px)" href="screen.css">

ここでは、reset.css、phone.css、screen.css の 3 つのスタイル シート ファイルが定義されており、ビューポート幅が 480 ピクセル未満の表示デバイスを許可するために、reset.css がすべての表示デバイスにロードされます。 Phone.css をロードし、ビューポート幅が 768px を超える表示デバイスで screen.css をロードできるようにします。

最初の方法を使用すると、同じ CSS ファイル内に @media を複数回記述する必要があり、2 番目の方法を使用すると、 タグを複数回記述する必要があることがわかります。どちらの方法でも効果は同じなので、お好みの方法を選択してください。

事实上，还可以是CSS的 @import 指令按条件引入其他样式表。如，以下代码对给视口最大宽度为 360px 的显示屏设备加载一个名为 small.css 的样式表文件。

@import url("small.css") screen and (max-width: 360px);

但是，使用CSS的 @import 方式会增加HTTP请求，这会影响页面的加载速度，因此并不推荐使用这种方法。

在媒体查询中，把设备宽度的临界点称作断点，并把媒体特性 min-width 和 max-width 对应的属性值称作断点值。

综上所述，媒体查询就是使用断点来创建媒体查询的条件，并为每个断点调用一个样式表文件（或样式代码），来实现在不改变页面内容的情况下，为不同的设备及不同尺寸的设备定制显示效果。

说明：让IE6~8支持媒体查询

虽然媒体查询已经被广泛使用，并得到所有现代浏览器的支持，但IE 9以下的老版本浏览器却不支持它。可以选择给老版本的IE添加垫片脚本，让它们支持媒体查询功能。

respond.js（https://github.com/scottjehl/Respond）是一个快速、轻量的 Javascript 工具，它会遍历页面上的所有 CSS 引用，并使用媒体查询分析 CSS 规则。然后，监控浏览器宽度的变化，并添加或删除与媒体查询匹配的样式，使原本不支持媒体查询的IE6-8 支持媒体查询的 min-width 和 max-width 特性。

respond.js的使用非常简单，只需在页面所有的CSS之后，使用IE条件注释，让IE6-8版本加载 respond.js 脚本即可：

<!--[if lt IE 9]>
<script  src="respond.js "></script>
<![endif]-->

但需要注意，respond.js 无法解析CSS的@import指令。因此，建议在已有的样式表中追加媒体查询的样式。如，在样式表文件中，使用 min-width 或 max-width 定义媒体查询：

@media screen and (max-width: 480px) {undefined
    // 针对视口宽度小于 480px 的显示屏设备定义样式
}

（学习视频分享：css视频教程）

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