CSS3のメディアクエリの解析

この記事では主に CSS3 メディア クエリを紹介します (レスポンシブ レイアウトにより、さまざまな解像度とデバイスをカスタマイズできます)。必要な友人に参照していただけるように共有します。

メディア クエリ機能は非常に優れています。さまざまな解像度やデバイスをカスタマイズでき、コンテンツを変更せずに、作成した Web ページをさまざまな解像度やデバイスで正常に表示でき、スタイル

の損失の影響を受けません。非常に強力で、さまざまな解像度やデバイスをカスタマイズでき、コンテンツを変更することなく、作成した Web ページをさまざまな解像度やデバイスで動作させることができます。
まず、簡単な例を見てみましょう:

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

上記のメディア ステートメントは、ページ幅が 600px 以下の場合、small.css スタイル シートを呼び出して Web ページをレンダリングすることを意味します。まず、メディア ステートメントに含まれるコンテンツを見てみましょう:
1. 画面: 言うまでもなく、これはメディア タイプを指します。
2. はキーワードと呼ばれますが、同様ではありません。 , 後ほど紹介します; 3. (max-width: 600px): 簡単に言うとメディアの状態です。
メディア クエリをよりよく理解するために、前の例に戻りましょう: CSS への変換は次のとおりです:

@media screen and (max-width: 600px) { 
选择器 { 
属性：属性值； 
} 
}

実際には、@media srceen の small.css ファイルにスタイルを配置し、(max-width ; 600px){…} 中括弧内。上記のステートメント構造では、メディア クエリと CSS の属性セットが非常に似ていることがわかります。主な違いは次のとおりです。

1. メディア クエリは値として 1 つの論理式のみを受け入れるか、値を受け入れません。 CSS 属性 ページ情報の表示方法を宣言するために使用されます。メディア クエリは、出力デバイスが特定の条件を満たすかどうかを判断するために使用されます。値が特定の値以上または以下の場合に使用されます
4. CSS 属性には属性値が必要です。その式は true または false のみを返すためです。

を見てみましょう。一緒に見てください メディア クエリの具体的な使用法をご覧ください

1. 最大幅

<link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" type="text/css" />

上記の意味は、画面が 900px 以上の場合、Web のレンダリングに big.css スタイルが使用されます。ページ。

2. 複数のメディア クエリの使用

<link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css" />

メディア クエリは複数のメディア クエリと組み合わせることができます。つまり、メディア クエリには 0 個以上の式を含めることができ、式には 0 個以上のキーワードとメディア タイプを含めることができます。 。上に示したように、画面が 600px ～ 900px の場合、web ページのレンダリングに style.css スタイルが使用されることを意味します。

3. デバイスの幅

<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />

上記のコードは、iPhone の最大幅 480 ピクセルに適した iphone.css スタイルを参照しています。ここでの max-device-width は、はデバイスの実際の解像度であり、視覚領域の解像度を指します
メディア クエリを使用して、さまざまな解像度の Android スマートフォンに特定のスタイルを提供できるため、画面解像度の違いによる Android スマートフォンのページ再構築の問題を解決できます。 。

4. Not キーワード

<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" />

not キーワードは、特定の指定されたメディア タイプを除外するために使用されます。つまり、式に一致するデバイスを除外するために使用されます。

5. 唯一のキーワード

<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />

only は、特定のメディア タイプを定義するために使用され、メディア クエリをサポートしていないブラウザを除外するために使用できます。実際、only は、メディア クエリをサポートしていないがメディア タイプをサポートしているデバイスのスタイル シートを非表示にするためによく使用されます。主なものは次のとおりです。メディア機能 (メディア クエリ) をサポートするデバイスの場合、スタイルが通常どおり呼び出されると、メディア機能 (メディア クエリ) をサポートしていないがメディアをサポートするデバイスの場合、そのスタイルは存在しないものとして扱われます。また、メディアクエリをサポートしていないブラウザは、サポートしているかどうかに関係なく、スタイルを使用しません。

6. その他

メディア クエリでメディア タイプが明示的に指定されていない場合は、次のようにデフォルトで all が使用されます。

<link rel="stylesheet" media="(min-width: 701px) and (max-width: 900px)" href="medium.css" type="text/css" />

さらに、次のように、並列または or を示すためにカンマ (,) が使用されます。 上記のコードの style.css スタイルは、幅が 480 ピクセル以下のハンドヘルド デバイス、または画面幅が 960 ピクセル以上のデバイスで使用されます。
メディア クエリの使用に関するこのセクションはこれで終わりです。最後に、メディア クエリは、さまざまな条件下でさまざまなスタイルを使用し、さまざまなレンダリング効果を実現するためにページを使用することができると個人的には思います。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連おすすめ:

CSSバナー画像をレスポンシブかつ中央に表示する方法について

IE互換のインナーシャドウとアウターシャドウの実装とテストコード

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