Responsive Design

9 Artikel

CSS-Layout-Raster, das zeigt, wie Container-Query-Breakpoints Komponenten an die Größe ihres Containers anpassen

Modernes CSS-Layout: Container Queries und Subgrid

Praxisnahe Anleitung für responsive Layouts mit CSS Container Queries und Subgrid: Komponenten-Responsiveness, Ausrichtung, Karten-Raster, Dashboards.

10. März 2025·5 Min. Lesezeit

Nebeneinander dargestellter Vergleich derselben Card-Komponente, einmal klein in einer Seitenleiste und einmal groß in einem Hauptinhaltsbereich, gerendert mit Container Queries

Frontend

Container Queries: Komponenten, die auf ihren Container reagieren

Baue responsive Komponenten mit CSS Container Queries, die sich am Container statt am Viewport orientieren — ein Layout für Sidebars und Modals.

3. Aug. 2024·5 Min. Lesezeit

Diagramm eines komplexen CSS-Grid-Layouts mit überlappenden Grid-Bereichen, Subgrid-Ausrichtung, benannten Template-Bereichen und responsivem Umbruch bei verschiedenen Breakpoints

Frontend

Fortgeschrittene CSS-Grid-Muster für komplexe Layouts

Fortgeschrittenes CSS Grid in Produktion: Subgrid, benannte Bereiche, responsiver Umbruch, Auto-Placement, minmax und grid-bewusste Komponenten.

21. Dez. 2023·5 Min. Lesezeit

Vergleich von Media Queries, die auf die Viewport-Breite abzielen, mit Container Queries, die auf die Breite des Elternelements abzielen, für responsives Komponentendesign

Frontend

Portable UI-Module mit CSS Container Queries

Wie CSS Container Queries Komponenten ermöglichen, die sich an die Größe des Elternelements statt an den Viewport anpassen — portabel in jedem Layout.

21. Okt. 2023·5 Min. Lesezeit

Visuelle Übersicht über CSS-Layout-Patterns, darunter Holy Grail, Sidebar, Masonry und responsive Card-Grids

Frontend

Moderne CSS-Layout-Patterns, die jeder Entwickler kennen sollte

Praktische CSS-Layout-Patterns mit Grid, Flexbox, Container Queries und logischen Eigenschaften — responsives Design ohne JavaScript.

24. Mai 2023·4 Min. Lesezeit

Vorher-Nachher-Vergleich, der die Reduzierung der Bilddateigröße von 2 MB auf 40 KB bei erhaltener visueller Qualität zeigt

Frontend

Bildoptimierung für Web-Performance

Praktischer Leitfaden zur Bildoptimierung im Web: moderne Formate, responsive Bilder, Lazy Loading, CDN-Auslieferung und Core-Web-Vitals-Wirkung.

8. Dez. 2021·5 Min. Lesezeit

Gegenüberstellung einer Card-Komponente, die ihr Layout an die Containerbreite anpasst

Frontend

CSS Container Queries: Responsive Komponenten ohne Media Queries

Wie CSS Container Queries Komponenten auf ihren Eltern-Container statt auf den Viewport reagieren lassen — für wirklich wiederverwendbare Bausteine.

19. Mai 2021·5 Min. Lesezeit

Vergleich von responsivem Design, der dieselbe Komponente bei unterschiedlichen Viewport-Breiten zeigt

Frontend

Modernes responsives Design: mehr als Media Queries

Container Queries, fließende Typografie, intrinsische Größen und clamp(): moderne Techniken, die Media Queries reduzieren und Layouts flexibel machen.

19. Okt. 2020·3 Min. Lesezeit

Visualisierung eines CSS-Grid-Layouts mit Zeilen, Spalten und Grid-Bereichen

Frontend

CSS Grid Layout: Ein praktischer Leitfaden zur Meisterschaft

CSS Grid ermöglicht zweidimensionale Layouts, die früher Hacks brauchten: das Grid-Modell, Platzierungsregeln und Muster statt Float-Layouts.

7. Okt. 2020·3 Min. Lesezeit

Alle Artikel anzeigen