Container Queries vs Media Queries
Es gibt zahlreiche Stilelemente, die in unterschiedlichen Umgebungen auftauchen können: z.B. Produktkarten (cards), die im Hauptbereich der Seite und in Sitebars verwendet werden.
- Media Queries (@media) steuern das Layout und Stile basierend auf der Viewport-Größe (also je nach Breite des Browserfensters).
- Container Queries (@container) reagieren auf die Größe des übergeordneten Containers, nicht auf den gesamten Viewport.
Ein Beispiel sind Karten (cards), die in einer Sidebar oder in einem Grid-Layout stehen können. Meist zeigt das Layout bei schmalen Viewports Karten und auch ihre Inhalte zeilenweise untereinander, und erst bei breiteren Viewpoints werden zwei oder mehr Karten nebeneinander gesetzt.
/* Container definieren */
.grid, .sidebar {
container-type: inline-size; /* Container Queries aktivieren */
}
Grid – z.B. breiter Bereich der Landing Page
Pferd, Schecke, braun mit weißen Flecken
Sidebar – schmaler Bereich, Seitenleiste
Pferd, Schecke, braun mit weißen Flecken
Bis zwei oder mehr Karten nebeneinander erscheinen, können Bilder übergroß erscheinen: dann ist es effizienter, auch die Inhalte von Karten nebeneinander zu setzen.
