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) { 
选择器 { 
属性：属性值； 
} 
}

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

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

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

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

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

4. Not キーワード

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

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

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

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

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

関連おすすめ:

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

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

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