Einfacher kleiner Anwendungsfall für `vmin`

Viewport-Einheiten sind Dinge wie 10vw (10 % der Viewport-Breite) oder 2vh (2 % der Viewport-Höhe). Manchmal nützlich, da sie sich immer auf den Viewport beziehen. Kein Cascading oder Einfluss durch Elternelemente.

Es gibt auch vmin, das ist das kleinere von vw und vh, und vmax, das ist das größere. Diese Werte können für alles verwendet werden, das einen Längenwert benötigt, genau wie px oder em oder % oder was auch immer.

Werfen wir einen Blick auf ein winziges Designmuster, das vmin nutzt.

Ein Header-Block!

Wenn wir die padding eines <header> wie folgt setzen

header {
  padding: 10vmin 1rem;
}

Wir erhalten eine feste Polsterung (1rem) an den Außenseiten, sodass zum Beispiel Text, der darin gesetzt ist, die Ränder nie berührt. Wir erhalten auch einen Header, der seine Größe auf eine Weise anpasst, die sich je nach Bildschirmfläche angemessen anfühlt.

Die Skalierung basierend auf dem *Minimum* der beiden Fensterdimensionen scheint richtig zu sein, anstatt sie nur nach Breite oder Höhe zu skalieren.

Hier ist die Demo.

Hier ist ein Video