「max-device-width または max-width: 応答性を高めるにはどちらの CSS メディア クエリを使用する必要がありますか?」

max-device-width または max-width を使用する必要がありますか?

Background

CSS メディア クエリでは、2 つの主要なプロパティを使用して、ターゲット特定のデバイス: max-device-width と max-width。前者はデバイスの物理的な画面幅をターゲットにし、後者はビューポート (現在のブラウザ ウィンドウ) の幅をターゲットとします。

主な違い

デスクトップ上のブラウザ ウィンドウのサイズを変更する場合:

• max-device-width は変更されず、デバイスの全画面サイズを対象とします。
• max-widthブラウザ ウィンドウの幅に応じて変化し、応答性の高いレイアウトが可能になります。

推奨事項

応答性と適応性のために、代わりに min-width/max-width を使用することを強くお勧めします。 min-device-width/max-device-width.

非推奨

デバイス幅メディア機能はメディア クエリ レベル 4 仕様ドラフトで非推奨となっているため、使用しないでください。

説明

ピクセル密度と画面解像度の違いにより、ピクセル値がどのように変化するかを考慮することが重要になります。さまざまなデバイスで解釈されます。ビューポート メタ タグ () により、デバイス間で一貫したスケーリングが確保されます。

max-device-width 制限の使用ブラウザ ウィンドウのサイズが変更されると、小さな画面を対象とするメディア クエリが適用されないため、デスクトップでの応答性が低下します。対照的に、max-width を使用すると、ブラウザのウィンドウ サイズに動的に適応できます。

結論

幅広い画面サイズを対象とする応答性の高い Web サイトの場合は、min-width/max-width を使用します。メディアクエリ。さらに、ビューポートの幅とスケーリングを制御するために、ビューポート メタ タグを忘れずに含めてください。

以上が「max-device-width または max-width: 応答性を高めるにはどちらの CSS メディア クエリを使用する必要がありますか?」の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。