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

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

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

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

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

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

4.

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

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

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

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

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

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

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

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

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 サイトの他の関連記事を参照してください。