一貫したクロスブラウザスタイルを実現するために、`min-width` と `max-width` を指定した `@media` クエリを使用するにはどうすればよいですか?

Min-Width と Max-Width を指定した @Media の使用

CSS のコンテキストでは、@media クエリを使用して特定の画面をターゲットにできますさまざまなスタイルのサイズやデバイス。ただし、さまざまなデバイスやブラウザ間で一貫して動作するようにメディア クエリをセットアップするのは難しい場合があります。

あなたの場合、3 つの @media ルールを定義しました:

@media screen and (min-width: 769px) {...}
@media screen and (min-device-width: 481px) and (max-device-width: 768px) {...}
@media only screen and (max-device-width: 480px) {...}

このセットアップが機能する間iPhone では、なぜブラウザで機能しないのかは不明です。潜在的な問題の 1 つは、メタ タグで「device」を使用し、3 番目のルールで「max-device-width」の代わりに「max-width」を使用していることです。

ただし、推奨されるアプローチは、 @media クエリをサポートしていない古いブラウザ用のデフォルトの CSS スタイル。次に、@media ルールを使用して、追加のスタイルを持つ特定の画面サイズまたはデバイスをターゲットにします。例:

/* Default styles for older browsers */
body {
  font-size: 14px;
}

/* Styles for screens wider than 960px */
@media only screen and (min-width: 960px) {
  body {
    font-size: 16px;
  }
}

/* Styles for mobile browsers narrower than 480px */
@media only screen and (max-device-width: 480px) {
  body {
    font-size: 12px;
  }
}

このアプローチに従うことで、より広範囲のデバイスやブラウザとの互換性を確保できます。

以上が一貫したクロスブラウザスタイルを実現するために、`min-width` と `max-width` を指定した `@media` クエリを使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。