CSS Media Queries sind ein zentrales Werkzeug, um Webseiten an unterschiedliche Bildschirmgrößen anzupassen. Sie bilden die Grundlage moderner Responsive-Layouts und ermöglichen eine flexible Darstellung auf Smartphones, Tablets, Laptops und großen Desktop-Bildschirmen.
Früher wurden Media Queries häufig für konkrete Geräte oder bestimmte Modellreihen erstellt. Heute setzt man hingegen auf flexible, geräteunabhängige Breakpoints, die sich am Layout und den tatsächlichen Inhaltsbreiten orientieren.
Hier finden Sie ein Codebeispiel mit typischen, modernen Breakpoints.
/* Extra Small (Smartphones) */
@media (max-width: 575px) {}
/* Small (größere Smartphones, kleine Tablets) */
@media (min-width: 576px) and (max-width: 767px) {}
/* Medium (Tablets Hochformat) */
@media (min-width: 768px) and (max-width: 991px) {}
/* Large (Tablets Querformat / kleine Laptops) */
@media (min-width: 992px) and (max-width: 1199px) {}
/* Extra Large (Laptops & Desktop) */
@media (min-width: 1200px) and (max-width: 1399px) {}
/* XXL (große Monitore) */
@media (min-width: 1400px) {}
Die Media Queries werden einfach in die bestehende CSS-Datei (z. B. style.css) übernommen und an die gewünschten Layout-Anpassungen angepasst. Anschließend sollte das Ergebnis auf verschiedenen Geräten oder in den Geräte-Ansichten moderner Browser getestet werden.
Media Queries werden von allen aktuellen Browsern wie Chrome, Firefox, Safari und Edge vollständig unterstützt. Eine gesonderte Optimierung für veraltete Browser wie den Internet Explorer ist in der Regel nicht mehr notwendig, da dieser kaum noch genutzt wird und offiziell nicht mehr gepflegt wird.
Bei der Entwicklung neuer Webseiten empfiehlt es sich, moderne, layoutbasierte Breakpoints zu verwenden, anstatt jede mögliche Bildschirmgröße oder ältere Browsergenerationen zu berücksichtigen. Das reduziert Aufwand und Kosten, ohne die Nutzererfahrung moderner Besucher einzuschränken.