Viewports

Das Designsystem stellt zentrale Breakpoints für responsive Styles zur Verfügung. Dadurch verwenden Komponenten und Anwendungen einheitliche Breakpoints, ohne deren konkrete Werte selbst definieren zu müssen.

Breakpoints

Breakpoint	Viewport
s	0rem
m	37.5rem
l	64rem
xl	75rem
xxl	93.25rem

Die Breakpoints werden nach dem Mobile-First-Prinzip verwendet. Ein Breakpoint gilt ab der angegebenen Mindestbreite und aufwärts.

breakpoint()

Mit breakpoint() kann ein Style ab einem definierten Breakpoint angewendet werden:

@use "@mmm/designsystem/src/styling/layouts/viewport" as viewport;

.component {
  font-size: 1rem;

  @include viewport.breakpoint(m) {
    font-size: 1.125rem;
  }
}

Der Style innerhalb des Mixins wird ab m (37.5rem) angewendet.

Verfügbare Breakpoints

@include viewport.breakpoint(s);
@include viewport.breakpoint(m);
@include viewport.breakpoint(l);
@include viewport.breakpoint(xl);
@include viewport.breakpoint(xxl);

breakpoint-custom()

Für spezielle Anwendungsfälle können individuelle min-width- und max-width-Grenzen definiert werden.

Mindestbreite

@include viewport.breakpoint-custom($min-width: 50rem) {
  // Styles ab 50rem
}

Maximale Breite

@include viewport.breakpoint-custom($max-width: 75rem) {
  // Styles bis 75rem
}

Bereich

@include viewport.breakpoint-custom(
  $min-width: 50rem,
  $max-width: 75rem
) {
  // Styles zwischen 50rem und 75rem
}

Empfehlung

Für responsive Styles sollten bevorzugt die zentral definierten Breakpoints mit breakpoint() verwendet werden:

@include viewport.breakpoint(l) {
  // Responsive styles
}

breakpoint-custom() sollte nur verwendet werden, wenn das gewünschte Verhalten nicht mit einem der definierten Designsystem-Breakpoints abgebildet werden kann.