Warum funktioniert meine Medienabfrage nicht in Browsern, aber auf Mobilgeräten?

Medienabfrage: Anpassen von Stilen für bestimmte Geräteauflösungen

Die @media-Eigenschaften „min-width“ und „max-width“ bieten eine detaillierte Kontrolle über stilbasierte auf Geräteauflösung. Bei der Verwendung dieses Setups tritt jedoch ein häufiges Problem auf: Es funktioniert auf Mobilgeräten, aber nicht in Browsern.

Ursache des Problems

Das Problem ergibt sich aus der Existenz von ein Meta-Tag, das die Breite des Ansichtsfensters und die Benutzerskalierbarkeit angibt. Durch die Verwendung dieses Meta-Tags überschreiben Sie effektiv die Standardeinstellungen des Geräts. Daher werden die auf Geräteabmessungen basierenden @media-Regeln ungenau.

Lösung: Stile neu anordnen

Die Lösung besteht darin, das CSS neu anzuordnen, um Standardstilen für ältere Browser Vorrang zu geben unterstütze @media nicht. Verwenden Sie dann @media-Regeln, um bestimmte Stile für verschiedene Geräteauflösungen anzuwenden. Hier ist ein empfohlener Ansatz:

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

/* Styles for larger browsers (>= 960px) */
@media only screen and (min-width: 960px) {
  body {
    font-size: 18px;
  }
}

/* Styles for iPhone-sized devices (<= 480px) */
@media only screen and (max-device-width: 480px) {
  body {
    font-size: 14px;
  }
}

Zusätzliche Überlegungen

• iPad-Bildschirme sind normalerweise größer als iPhones, daher benötigen Sie möglicherweise separate @media-Regeln für sie.
• Sie können die Eigenschaft @media print{} verwenden, um Stile für druckbare Versionen Ihres Dokuments anzugeben Inhalt.
• Testen Sie Ihre Stile immer gründlich auf verschiedenen Geräten und Browsern, um sicherzustellen, dass sie korrekt dargestellt werden.

Das obige ist der detaillierte Inhalt vonWarum funktioniert meine Medienabfrage nicht in Browsern, aber auf Mobilgeräten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!