Wie schreibe ich effektive CSS-Medienabfragen für verschiedene Bildschirmgrößen?

CSS-Medienabfragen für Bildschirmgrößen: Ein umfassender Leitfaden

Die Entwicklung von Layouts, die sich nahtlos an verschiedene Bildschirmgrößen anpassen, ist ein Eckpfeiler des modernen responsiven Designs . Um diese Technik zu beherrschen, ist das Verständnis und die effektive Nutzung von CSS-Medienabfragen von größter Bedeutung.

Bildschirmgrößen definieren

In diesem Szenario werden die Zielbildschirmgrößen aufgelistet als:

• 640x480
• 800x600
• 1024x768
• 1280x1024 (und größer)

Schreiben Effektive Medien Abfragen

Um ein Layout zu erstellen, das sich an die Fensterbreite anpasst, werden Medienabfragen eingesetzt. Obwohl das bereitgestellte Codebeispiel Medienabfragen enthält, sind diese nicht richtig konfiguriert. Hier ist eine Lösung:

Überarbeitete Medienabfragen:

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (max-device-width: 480px) {
  /* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width: 321px) {
  /* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width: 320px) {
  /* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  /* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
  /* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  /* Styles */
}

/* Desktops and laptops ----------- */
@media only screen and (min-width: 1224px) {
  /* Styles */
}

/* Large screens ----------- */
@media only screen and (min-width: 1824px) {
  /* Styles */
}

Zusätzliche Ressourcen:

• Quelle: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
• Responsive Werte: https://zellwk.com/blog/media-query-units/

Fazit:

Durch die Verwendung geeigneter Medienabfragen können Designer responsive Layouts erstellen die sich mühelos an verschiedene Bildschirmgrößen anpassen und so ein optimales Benutzererlebnis auf mehreren Geräten gewährleisten.

Das obige ist der detaillierte Inhalt vonWie schreibe ich effektive CSS-Medienabfragen für verschiedene Bildschirmgrößen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!