Adaptives Design und Wendepunkte

1) Grundsätze

1. Content first: Layouts werden aus Aufgaben und Inhalten aufgebaut, nicht aus „populären“ Breiten.
2. Mobile-first: Wir beginnen mit einer strikten einfachen Option und werden komplizierter, wenn die Breite/Eingabefähigkeit wächst.
3. Progressive Verbesserung: Basic UX funktioniert ohne JS/Animationen; Verbesserungen werden durch Bedingungen verbunden.
4. Consistency: gleiche Muster - gleiches Verhalten auf allen Breakpoints.
5. Performance-aware: Bilder, Raster und Skripte passen sich an Gewicht und Komplexität an.

2) Bruchstellen (Breakpoints)

Wir wählen nach den Daten der realen Geräte und nach dem Wechsel des Musters (Spalten/Navigation/Typografie).

Empfohlenes Set (Benchmark)

• Breakpoint wird nur eingeführt, wenn sich die Struktur ändert (z. B. 1→2 von Kartensäulen, Auftreten einer Sidebar).
• Lokale Unterbrechungen innerhalb der Komponente (Container Requests) sind zulässig.

3) Containerabfragen vs Medienabfragen

Bei Medienanfragen'@ media': das Layout der gesamten Seite (Navigation, Vorlage) ändert sich.
Wenn Container'@ container': Die Karte/Widget muss sich an seine verfügbare Breite anpassen (die Komponente ist unabhängig von der Seite).

css
/ Include container rating for unit/
.widget { container-type: inline-size; }

/ Inside - we adapt the card to the width of the container/
@container (min-width: 520px) {
.card { grid-template-columns: 1fr 1fr; }
}

Verwenden Sie das Bundle: Medien für Seitenrahmen + Container für Komponenten.

4) Typografie: fluid + Schritte

Kombinieren Sie' clamp () 'und breakpoints Schritte.

css
:root {
/ Basic fluid headset/
--fs-body: clamp(15px, 1. 2vw + 0. 2rem, 18px);
--fs-h2:  clamp(20px, 1. 6vw + 0. 4rem, 24px);
}
body { font-size: var(--fs-body); line-height: 1. 55; }
h2  { font-size: var(--fs-h2); line-height: 1. 3; }
@media (min-width: 1200px) {
h2 {letter-spacing: .005em; }/fine tuning on LG +/
}

• Die Länge der Zeile beträgt 45-80 Zeichen (auf Sidebars 36-60).
• Die Schritte der Größen sind Vielfache von 4/8-pt; line-height ist stabil durch breakpoints.

5) Gitter und Module

Auf der Ebene der Abschnitte - CSS Grid (Spalten, Bereiche); innen - Flex.
Die Bauteilhöhen sind Vielfache der Baseline (z.B. 40/48/56 px).
Wir haben 2 Dichtevoreinstellungen: Comfort (Lesen/Dashboards) und Compact (Tabellen/Pro).

css
.container {
display: grid; gap: 24px;
grid-template-columns: repeat(12, minmax(0,1fr));
max-width: 1280px; margin: 0 auto; padding: 0 16px;
}
@media (max-width: 1199px) {.container { grid-template-columns: repeat(8,1fr); gap: 20px; }}
@media (max-width: 839px) {.container { grid-template-columns: repeat(6,1fr); gap: 16px; }}
@media (max-width: 599px) {.container { grid-template-columns: repeat(4,1fr); }}

6) Bilder und Medien

html
<img src="card-640. jpg"
srcset="card-640. jpg 640w, card-960. jpg 960w, card-1280. jpg 1280w"
sizes="(min-width:1200px) 33vw, (min-width:840px) 50vw, 100vw"
alt = "Description">

css
.media { aspect-ratio: 16/9; object-fit: cover; }

Für Hintergründe gibt es' image-set () 'und lazy-loading.
Der Text im Bild - nur auf der Platte/Overlay; Der Kontrast ≥ AA.

7) Navigation und responsive-Muster

XS/SM: bottom-nav oder hamburger, sichtbar durch CTA; versteckte Suche wird oben aufgedeckt.
MD: persistent-sidebar/mega-menu erscheint.
LG/XL: zwei Navigationsebenen, Schnellfilter, Brotkrümel.

Verhalten: Elemente „bewegen“ sich nicht chaotisch - immer eines der zuvor beschriebenen Schemata.

8) Eingabe: hover/touch/keyboard

css
@ media (hover: hover) and (pointer: fine) {/hover effects/}
@ media (hover: none), (pointer: coarse) {/touch-patterns/}
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

• Keine kritischen Inhalte „nur im Hover“.
• Klickzonen: ≥ 44 × 44 (mobil) ≥ 32 × 32 (Desktop)
• Die Tastatur wird auf allen Breakpoints unterstützt.

9) Sicherheitszonen und Systemausschnitte

css
.page {
padding-left: max(16px, env(safe-area-inset-left));
padding-right: max(16px, env(safe-area-inset-right));
padding-bottom:max(16px, env(safe-area-inset-bottom));
}

10) Dunkle/helle Themen und Kontrast

Die Themen sind unabhängig von Breakpoints: Die Ziele des Kontrastes sind überall gleich.
Bei XS vermeiden wir „saure“ Akzente; Wir erhöhen die Helligkeit von Links auf einem dunklen Hintergrund.
Unterstützung für 'prefers-color-scheme' und Handschalter.

11) Produktivität

Critical CSS - inline oder über 'media = „print “/preload Strategie; JS wird verzögert geladen.
Vermeiden Sie Layout-schwere Animationen auf langen Listen; animieren Sie' opacity/transform'.
Faules Laden von Bildern/Widgets; Skelett statt Spinner.
Begrenzen Sie „schwere“ Schatten/Filter auf Dutzende von Karten.

12) Design-System-Token (Beispiel)

json
{
"breakpoints": { "xs": 360, "sm": 600, "md": 840, "lg": 1200, "xl": 1440 },
"container":  { "sm": 584, "md": 808, "lg": 1152, "xl": 1320 },
"columns":   { "xs": 4, "sm": 6, "md": 8, "lg": 12 },
"gutter":   { "sm": 16, "md": 20, "lg": 24, "xl": 32 },
"space":    { "xs": 4, "sm": 8, "md": 12, "lg": 16, "xl": 24, "2xl": 32 }
}

css
:root {
--bp-sm: 600px; --bp-md: 840px; --bp-lg: 1200px; --bp-xl: 1440px;
--container-lg: 1152px;
}
@media (min-width: var(--bp-lg)) {
.container { max-width: var(--container-lg); }
}

13) Komponentenworkshop (Containerpausen)

css
.card { display: grid; gap: 12px; container-type: inline-size; }
.card__media { aspect-ratio: 4/3; }
@container (min-width: 420px) {
.card { grid-template-columns: 1fr 1. 2fr; align-items: center; }
.card__media { aspect-ratio: 16/9; }
}

• XS: Stapelansicht (Label links, Wert rechts, Blöcke).
• SM +: horizontales Scrolling nur bei Spaltenüberschuss, wir fixieren die Kappe/erste Spalte.
• Die Zahlen sind tabular-nums, die Ausrichtung ist dezimal.

14) Lokalisierung und RTL

'dir =' rtl''+': dir (rtl) 'zum Spiegeln von Icons/Pfeilen/Margin-s.
Übersetzungen können die Länge der Zeilen um 20-30% erhöhen - legen Sie einen Vorrat an.
Bei einigen Schreibweisen (z. B. Georgisch/Thai) erhöhen Sie den Basiskegel um 1 px.

15) Besonderheiten von iGaming

Turnier-/Bonuskarten: Raster 3 × N (LG), 2 × N (MD), 1 × N (SM/XS); Der CTA und die Bedingungen sind in einer permanenten Zone.
Leader/Ratings: Sticky-Cap/erste Spalte; auf XS - Stacked-Modus; Die Zahlen sind monoextensiv.
Zahlungsformen: auf XS - einspaltig; auf MD - 2 Spalten (Feld + Erklärung).
Verantwortungsvolle Benachrichtigungen (18 +, Limits, Risiken): immer auf allen Breakpoints sichtbar, AAA-Kontrast, kein „Hidden in Hover“.

16) Anti-Muster

Feste Blockbreiten statt Raster/Spalten.

„Wendepunkt um jeden Pixel“: Zu viele Medienanfragen → Chaos

Gebrochener Rhythmus: verschiedene gutter/Felder in benachbarten Abschnitten ohne Grund.
Kritischer Text im Bild ohne Stempel.
Inhalte, die nur bei Hover verfügbar sind (bei Touch unerreichbar).
Animationen von Layout-Eigenschaften auf langen Listen.

17) QS-Checkliste

Gitter und Behälter

• Spalten und Gutter entsprechen Breakpoints; Die Container sind zentriert.
• Die Komponenten „fließen“ korrekt 1→2→3 die Lautsprecher, ohne zu brechen.

Typografie

• Zeilenlänge 45-80; Fluid-Stifte durch 'clamp ()'.
• Der Kontrast des Textes entspricht in beiden Themen der WCAG.

Bilder

• Есть `srcset/sizes`, `aspect-ratio` и lazy-loading; kein CLS.

Eingabe und A11y

• Die Navigation mit der Tastatur;': focus-visible' ist sichtbar.
• Alternative Hover auf Touch; Klickzone ≥ 44 × 44.
• 'prefers-reduced-motion' wird unterstützt.

Leistung

• Nur 'transform/opacity' wird animiert; schwere Wirkungen sind begrenzt.
• Kritische CSS/JS werden effizient geladen.

18) Dokumentation im Konstruktionssystem

„Responsive & Breakpoints“: Tabelle der Breakpoints, Container, Lautsprecher und Gutter.
„Container Queries“: Beispiele für adaptive Komponenten.
„Fluid Type“: Formeln 'clamp ()' und Voreinstellungen für Skalen.
„Navigationsmuster“: XS/SM/MD/LG/XL-Varianten.
„Do/Don't“ mit kurzen Clips und CLS/LCP-Werten.

Kurze Zusammenfassung

Anpassungsfähigkeit ist eine Strategie, keine Ansammlung von chaotischen Medienanfragen. Nutzen Sie Geräteinhalte und -analysen, kombinieren Sie Medienanfragen mit ausgereiften Gitter- und Containeranfragen, wenden Sie „clamp ()“ für Typografie an, steuern Sie Bilder und Leistung, unterstützen Sie alle Eingabe- und A11y. So bleibt die Schnittstelle vorhersehbar, schnell und auf jedem Bildschirm gleichermaßen benutzerfreundlich.