クロスブラウザレスポンシブデザインで「@media min-width & max-width」を効果的に使用するにはどうすればよいですか?

レスポンシブ デザインに「@Media min-width & max-width」を使用する

セットアップで、「@media」を組み合わせます。ビューポートメタタグを使用したルールを使用してレスポンシブデザインを実現します。ただし、ブラウザの実装で問題が発生したとのことです。

問題を理解するために、「@media min-width & max-width」の意味を調べてみましょう:

• @media screen and (min-width: 769px): このルールは、最小幅が 769px の画面にスタイルを適用します。 769px.
• @media screen および (min-device-width: 481px) および (max-device-width: 768px): このルールは、特に最小デバイス幅を持つデバイスにスタイルを適用します。 481 ピクセル、最大デバイス幅 768 ピクセル。
• @media のみの画面と(max-device-width: 480px): このルールは、デバイスの最大幅が 480 ピクセルのデバイスにスタイルを適用します。

ブラウザの互換性

発生している問題は、ブラウザの「@media」クエリの互換性に関連している可能性があります。 IE 5.5 ～ 8 を含む古いブラウザは、「@media」クエリをサポートしていません。

ベスト プラクティスの推奨事項

ブラウザ間の互換性を確保するには、次のことをお勧めします。次のベスト プラクティスに従ってください:

• 次の場合はデフォルトの CSS を使用します古いブラウザ: 「@media」クエリをサポートしていない古いブラウザ用のデフォルトの CSS ルールを作成します。
• レスポンシブ スタイルに "@media" クエリを使用します: 「@media」を使用します" 画面の幅またはデバイスの寸法に基づいてレスポンシブ スタイルを適用するクエリ。
• デフォルトを設定ビューポート幅: ビューポート メタ タグで、デフォルトのビューポート幅を指定します。通常は「device-width」に設定されます。
• 「@media」クエリでは「device-width」を使用しないでください: 「@media」ルール条件で「device-width」を使用する代わりに、特定のピクセル値または em を使用します。
• デバイスの向きを考慮する: 「@media」クエリを追加して、縦向きや横向きなど、さまざまなデバイスの向きに対応します。

CSS の例:

これは、前述のベスト プラクティスに従った CSS の例です。上:

@media only screen and (min-width: 960px) {
  /* Styles for screens larger than 960px */
}

@media only screen and (device-width: 768px) {
  /* Styles for iPad screens */
}

@media only screen and (max-device-width: 480px) {
  /* Styles for mobile browsers smaller than 480px (iPhone) */
}

これらの推奨事項に従うことで、レスポンシブ デザインが幅広いデバイスやブラウザーで意図したとおりに動作することを確認できます。

以上がクロスブラウザレスポンシブデザインで「@media min-width & max-width」を効果的に使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。