Media-Queries sind eine zentrale Technik im Responsive Webdesign, die es Webentwicklern ermöglicht, unterschiedliche Layouts für verschiedene Gerätetypen zu erstellen. Sie sind Bestandteil von CSS (Cascading Style Sheets) und prüfen, welche Eigenschaften das Gerät des Nutzers aufweist, wie etwa die Bildschirmgröße, Auflösung, Farbeinstellungen oder Ausrichtung (hochkant oder quer). Basierend auf diesen Eigenschaften kann der Entwickler verschiedene Stile anwenden, um sicherzustellen, dass die Webseite auf jedem Gerät gut aussieht und benutzerfreundlich ist.
Funktionsweise von Media-Queries:
Eine Media-Query wird verwendet, um eine Bedingung abzufragen, wie etwa die Breite des Bildschirms. Abhängig von dieser Bedingung werden dann unterschiedliche CSS-Regeln angewendet. Ein Beispiel für eine einfache Media-Query, die sich auf die Bildschirmbreite bezieht, wäre:
CSS
@media only screen and (max-width: 768px) {
/* CSS-Regeln für Bildschirme bis 768px Breite (z.B. Tablets) */
body {
font-size: 14px;
}
}
Hier wird die Schriftgröße für Bildschirme, die kleiner oder gleich 768px sind (z.B. Tablets), auf 14px gesetzt.
Anwendung von Media-Queries in WordPress-Themes wie Divi:
Das Divi-Theme von WordPress bietet viele integrierte Funktionen, um Media-Queries für Responsive Design zu nutzen. Innerhalb des Divi-Editors können Benutzer die Darstellung der Seite für verschiedene Geräte (Desktop, Tablet, Smartphone) direkt anpassen, ohne dass dafür tiefgehende Programmierkenntnisse notwendig sind. Divi ermöglicht es, Layouts, Schriftgrößen, Abstände und andere visuelle Elemente für unterschiedliche Bildschirmgrößen anzupassen.
Beispiele für Media-Query-Features im Divi-Theme:
- Anpassbare Layouts: Divi erlaubt es, individuelle Layouts für verschiedene Geräte zu erstellen. So können z.B. Spalten auf einem großen Bildschirm (Desktop) nebeneinander angezeigt werden, während sie auf einem kleineren Bildschirm (Smartphone) untereinander gestapelt werden.
- Gerätespezifische Stile: Mit Divi können Benutzer Schriftgrößen, Bildgrößen und Abstände für Desktop-, Tablet- und Mobilansichten separat einstellen.
- Vorschau-Funktion: Divi bietet eine Live-Vorschau für verschiedene Gerätegrößen, sodass Benutzer die Auswirkungen von Media-Queries auf das Layout in Echtzeit sehen können.
Vorteile von Media-Queries:
- Optimierte Darstellung: Media-Queries sorgen dafür, dass Inhalte auf verschiedenen Bildschirmgrößen optimal angezeigt werden, was zu einer besseren Nutzererfahrung führt.
- Verbesserte Performance: Durch das gezielte Anpassen von Inhalten und Stilen für bestimmte Geräte können unnötige Ladezeiten vermieden werden, insbesondere auf mobilen Geräten.
- Flexibilität: Media-Queries bieten eine hohe Flexibilität bei der Gestaltung von Webseiten, da sie es ermöglichen, spezifische Stile nur für bestimmte Geräte anzuwenden.
So nutzt PERIMETRIK® Media Queries:
Wir setzen Media-Queries im Rahmen des Responsive Webdesigns ein, um sicherzustellen, dass die von uns entwickelten WordPress-Websites, insbesondere mit Themes wie Divi, auf allen Geräten optimal funktionieren. Wir helfen unseren Kunden, Layouts und Stile so anzupassen, dass sie sowohl auf großen Bildschirmen als auch auf kleinen Mobilgeräten eine exzellente Benutzererfahrung bieten.
Da wir festgestellt haben, dass trotz Media Query von Divi nicht immer die bestmögliche Bildversion ausgeliefert wird, haben wir PCM Image entwickelt, das zusätzliche Konfigurationen für komplexe mehrspaltige Layouts ermöglicht.
