CSS-Breakpoints

Bei Verwendung von Standarddesigns wendet das System beim Wechsel zwischen Mobilgeräten, Tablets und Desktops unterschiedliche Breakpoints an. Die Breakpoints sind:

Minimal

  • Bildschirmgröße unter 321 px Breite oder 321 px Höhe
  • Die Schriftgröße ist auf 0,38 eingestellt.
  • Die Zeilenhöhe ist auf 1,05 em eingestellt.
  • Der Abstand innerhalb des Feldes wird auf 5px reduziert
  • Bildschirmgröße unter 450×450: Das Feld wird auf 100%100% skaliert

Mobil: Hochformat

  • Bildschirmgröße unter 480 px Breite und 926 px Höhe
  • Boxbreite auf 100 % erweitert und Mindesthöhe von 300 px
  • Die Schaltflächen befinden sich unterhalb des Inhalts
  • Das Logo ist ausgeblendet
  • Fülltext wird reduziert
  • Zusätzlich: Wenn die Bildschirmgröße unter 414×736 oder 736×414 liegt (z. B. iPhone 6/7/8), wird der Abstand des Feldes verringert

Mobil: Querformat

  • Bildschirmgröße unter 926 px Breite und 480 px Höhe
  • Boxbreite auf 100 % erweitert und Mindesthöhe von 150 px
  • Die Schaltflächen sind auf der rechten Seite des Inhalts platziert und haben eine Breite von 250 px.
  • Das Logo ist ausgeblendet
  • Fülltext wird reduziert
  • Zusätzlich: Wenn die Bildschirmgröße unter 414×736 oder 736×414 liegt (z. B. iPhone 6/7/8), wird der Abstand des Feldes verringert

Desktop & Tablet

  • Bildschirmgröße über 926×480 oder 480×926

Zusätzliche Medienabfragen

Ebenen, die als „unten/volle Breite“, „oben/volle Breite“ und „nach unten verschieben“ positioniert sind:

  • Maximale Breite 1500px: Der Inhalt (Überschrift, Text und Zweck) der Einwilligungsschicht wird auf „100 % – 450px“ reduziert, damit die Schaltflächen auf der rechten Seite des Inhalts angezeigt werden können.
  • Maximale Breite 1200px: Der Inhalt (Überschrift, Text und Zweck) der Einwilligungsschicht wird auf „100 % – 250px“ reduziert, damit die Schaltflächen auf der rechten Seite des Inhalts angezeigt werden können. Dies
  • Maximale Breite 800px: Der Inhalt (Überschrift, Text und Zweck) der Einwilligungsschicht wird auf 100 % erweitert, damit die Schaltflächen unterhalb des Inhalts angezeigt werden können.

Ebenen, die als „unten/rechts“, „unten/Mitte“, „Mitte/Mitte“ und „oben/Mitte“ positioniert sind:

  • Maximale Breite 600px: Die Box wird auf 100 % Breite angepasst.

Ebenen, die als „Mitte/Center“ positioniert sind:

  • Max-height 600px und min-width 926px: Die Box wird auf volle Höhe angepasst und der Inhalt wird mit „flex“ und „overflow: auto“ festgelegt, um zu verhindern, dass die Box zu hoch für das Fenster wird.

Ebenen, die als „rechts/volle Höhe“ und „links/volle Höhe“ positioniert sind:

  • Maximale Breite 400px: Die Box wird auf 100 % Breite angepasst.

Seite mit benutzerdefinierten Einstellungen:

  • Maximale Breite 570px: Die Navigation wurde nach oben verschoben, um genügend Platz für den Inhalt zu schaffen

 

We do our best to keep this purely informative documentation up to date. However, if you notice that any of these guides need a little touch-up, let us know!