Responsives Design #

Diese Seite ist für Designer, die ein Design auf jedem Bildschirm funktionsfähig machen. Sie beantwortet: was das Pagelayout braucht, wie Sie Breakpoints planen und welche Breiten und Zoomstufen Sie testen.

Inhalt #

1. Die Grundlagen
2. Ein Layout, das fließt
3. Breakpoints
4. Bilder
5. Berührung
6. Was zu testen ist

Die Grundlagen #

• Das viewport-Tag im Kopf des Pagelayouts (jedes mitgelieferte Design hat es):

  <meta name="viewport" content="width=device-width, initial-scale=1">

  Fügen Sie nie maximum-scale=1 oder user-scalable=no hinzu: Besucher müssen zoomen können.

• Ein HTML für jedes Gerät; CSS entscheidet über das Layout. Exponential hat eine Erkennung mobiler Geräte ($module_result.is_mobile_device), aber Templates, die pro Gerät anderes Markup senden, erschweren Caching und Testen. Ziehen Sie CSS vor.

Ein Layout, das fließt #

.site-main {
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
}
.card-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1.5rem;
}

Raster mit auto-fill/minmax, flex-wrap, clamp() für Größen und logische Eigenschaften (margin-inline) decken die meisten Layouts mit wenigen Media Queries ab und bleiben in Sprachen von rechts nach links korrekt.

Breakpoints #

Siehe Breakpoints und Containerbreiten für die Werte, die die mitgelieferten Designs verwenden, und wie Sie Ihre eigenen wählen. Schreiben Sie sie wo möglich in rem oder em, damit sie der Schriftgröße des Besuchers folgen.

Bilder #

• max-width: 100%; height: auto; an Inhaltsbildern.
• Mehrere Aliase mit srcset, damit Telefone kleine Dateien laden (Bildaliase).
• Attribute width und height, damit das Layout nicht springt (CLS und LCP messen).

Berührung #

• Tippziele mindestens 24 x 24 CSS-Pixel, besser 44 x 44 für die wichtigsten Bedienelemente. Die exp-mobile-layout.css des Designs media sammelt solche Korrekturen.
• @media (pointer: coarse) kann Bedienelemente nur für Berührung vergrößern; admin4 verwendet es.
• Verlassen Sie sich nicht auf Hover, um Inhalte zu zeigen: Touchscreens haben kein Hover.

Was zu testen ist #

Das Projekt prüft seine Seiten bei diesen Größen:

Bei jeder Größe: kein waagrechtes Scrollen der Seite, kein überlappender Text, jedes Bedienelement erreichbar, Text lesbar. Siehe Testen bei Zoomstufen.

Verwandte Seiten #

• Breakpoints und Containerbreiten
• Barrierefreiheit: Grundlagen für Themes
• Logische CSS-Eigenschaften
• Freie Dokumentation: Diese Seite darf unter der GNU FDL 1.3 frei kopiert, übersetzt und verbessert werden.