Wie kann ich „@media'-Abfragen mit „min-width' und „max-width' für ein konsistentes browserübergreifendes Styling verwenden?

Verwendung von @Media mit Min-Width und Max-Width

Im Kontext von CSS ermöglichen @media-Abfragen die Ausrichtung auf einen bestimmten Bildschirm Größen oder Geräte mit unterschiedlichen Stilen. Es kann jedoch eine Herausforderung sein, Medienabfragen so einzurichten, dass sie auf verschiedenen Geräten und Browsern konsistent funktionieren.

In Ihrem Fall haben Sie drei @media-Regeln definiert:

@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) {...}

Während dieses Setup funktioniert Auf einem iPhone ist nicht klar, warum es in einem Browser nicht funktioniert. Ein mögliches Problem besteht darin, dass Sie „device“ im Meta-Tag und „max-width“ anstelle von „max-device-width“ in der dritten Regel verwenden.

Der empfohlene Ansatz ist jedoch die Definition Standard-CSS-Stile für ältere Browser, die keine @media-Abfragen unterstützen. Verwenden Sie dann @media-Regeln, um bestimmte Bildschirmgrößen oder Geräte mit zusätzlichen Stilen anzusprechen. Zum Beispiel:

/* 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;
  }
}

Durch diesen Ansatz können Sie die Kompatibilität mit einer größeren Auswahl an Geräten und Browsern sicherstellen.

Das obige ist der detaillierte Inhalt vonWie kann ich „@media'-Abfragen mit „min-width' und „max-width' für ein konsistentes browserübergreifendes Styling verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!