ホームページ > 記事 > ウェブフロントエンド > CSS3のメディアクエリの解析

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

不言オリジナル: 2018-06-26 11:48:581321ブラウズ

この記事では主に 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 サイトをご覧ください。

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

関連記事