CSS3 メディア クエリに関する知識の概要

1. メディア クエリとは何ですか?

メディア クエリを使用すると、デバイスのディスプレイの特性 (ビューポートの幅、画面の比率、デバイスの向き: 横向きまたは縦向きなど) に応じて CSS スタイルを設定できます。メディア タイプとメディアの特性を検出する 1 つ以上の条件式で構成されます。メディア クエリで検出できるメディア プロパティは、 width 、 height 、 color (など) です。メディア クエリを使用すると、ページのコンテンツを変更せずに、特定の出力デバイスの表示効果をカスタマイズできます。

2. レスポンシブデザインにメディアクエリが必要な理由
CSS3 のメディアクエリモジュールがなければ、デバイス特性 (ビューポート幅など) に特定の CSS スタイルを設定できません

3. メディアの導入方法CSS ファイルへのクエリ

メディア クエリは CSS スタイル コードの最後に記述されます。CSS は同じ特異性の下で、後のスタイルは前のスタイルと重複します

4.

準備1:メタタグを設定する

まず、メディアを使用する場合、モバイルデバイスの表示効果と互換性があるように次のコードを設定する必要があります:

1. <メタ名= "viewport " content="width=device-width,Initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

このコードのいくつかのパラメータの説明:

• width = device-width: 幅は現在のデバイスの幅と同じです

• initial-scale: 初期スケーリング (デフォルト設定は 1.0)

• minimum-scale: 最小値ユーザーはスケールにズームできます (デフォルトは 1.0)

• maximum-scale: ユーザーがズームできる最大スケール (デフォルトは 1.0)

• user-scalable: ユーザーは手動でズームできます (デフォルトは no)。ユーザーにページのズームインやズームアウトをさせたくないからです)

準備 2: 互換性のあるファイル JS をロードします

IE8 は HTML5 も CSS3 メディアもサポートしていないため、したがって、互換性の効果を確実に達成するコードを作成するには、2 つの JS ファイルをロードする必要があります:

準備3: IE レンダリング モードを最高のデフォルトに設定します (これは、いくつかの部分を追加するかどうかを選択できます)

現在、多くの人の IE ブラウザが IE9 以降にアップグレードされているため、この時点で多くの奇妙なことが起こります。現在のブラウザは IE9 ですが、ブラウザのドキュメント モードは IE8 です:

この状況を防ぐには、IE のドキュメント モードを常に最新にするために次のコードが必要です。 meta http-equiv=" "

このコードの後に​​

chrome=1
1. を追加しました。この

   Google Chrome Frame (Google Embedded Browser Framework GCF)。一部のユーザーがこの Chrome プラグインをコンピュータにインストールしている場合、 IE のバージョンに関係なく、非常に強力な植字と計算に Webkit

   エンジンと
V8
2. エンジンを使用できます。ただし、ユーザーがこのプラグインをインストールしない場合は、 、このコードにより、IE は最高のドキュメント モードで表示されます。このコードを使用することをお勧めしますが、コードなしで使用することもできます。

   2. CSS ファイルで CSS レスポンシブ メディア クエリを記述する方法

例: さまざまな幅に応じてスタイルを変更する

HTML:

• John Doe< /li>

• Mary Moe
• Amanda Panda
幅 500 ピクセル未満 e@Media Screen および (最大幅: 500 ピクセル) {

UL & GT ; リー {

背景: 青;️ 500～700 ピクセル
@メディア画面、(max-width:700px) および (min -width:501px) {
font-size: 16px;
}
}
//幅は700〜1000ピクセル@メディア画面と（最大幅：1000px）および（min-width：701px）背景：プラム; : 22px;
一言で言うと、@media には 3 つの主要なポイントがあります:
1. メタタグ、
3、@media 画面、(max-width: 980px){} (サンプル スタイル)

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