VW zu PX Umrechner

Kombinieren Sie VW-Einheiten mit der CSS clamp()-Funktion, um fließende Typografie zu erstellen, die sich sanft skaliert und dabei lesbar bleibt. Die Funktion definiert eine Mindest-, eine Ideal- und eine Maximalschriftgröße. Dies verhindert, dass Text auf Smartphones zu klein oder auf Ultra-Wide-Displays überdimensioniert wird – ein wichtiger Aspekt der BITV 2.0-Richtlinien für barrierefreies Webdesign.

/* Überschrift: 28px bis 56px */
h1 {
  font-size: clamp(1.75rem, 4vw + 1rem, 3.5rem);
  line-height: 1.2;
}

/* Auf 1920px: 4vw = 76,8px */
/* → 4vw + 1rem = ~93px → begrenzt auf 56px */
/* Auf 375px: 4vw = 15px */
/* → 4vw + 1rem = ~31px → begrenzt auf 28px */

/* Fließtext: 16px bis 20px */
p {
  font-size: clamp(1rem, 1vw + 0.5rem, 1.25rem);
  line-height: 1.6;
}

Hero-Sections profitieren besonders von VW-Einheiten, da sie sich proportional zur Viewport-Breite skalieren. Dieses Beispiel zeigt eine vollflächige Hero-Section mit dynamischem Padding, das sich automatisch an die Bildschirmgröße anpasst. Auf großen Desktops erhalten Sie großzügige Abstände, während mobile Geräte optimierte Spacing-Werte nutzen.

.hero-section {
  width: 100%;
  min-height: 100vh;
  padding: clamp(2rem, 5vw, 8rem);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Padding skaliert mit Viewport */
/* Desktop 1920px: 5vw = 96px */
/* Tablet 768px: 5vw = 38,4px */
/* Mobile 375px: 5vw = 18,75px */

.hero-content {
  max-width: 90vw;
  width: 100%;
}

Erstellen Sie ein konsistentes Spacing-System mit VW-basierten CSS Custom Properties (CSS-Variablen). Diese Methode ermöglicht es Ihnen, Abstände zentral zu definieren und im gesamten Projekt zu verwenden. Änderungen an den Variablen wirken sich automatisch auf alle verwendenden Elemente aus, was die Wartbarkeit erheblich verbessert.

:root {
  --spacing-xs: clamp(0.5rem, 1vw, 1rem);
  --spacing-sm: clamp(1rem, 2vw, 2rem);
  --spacing-md: clamp(2rem, 4vw, 4rem);
  --spacing-lg: clamp(3rem, 6vw, 6rem);
  --spacing-xl: clamp(4rem, 8vw, 8rem);
}

.container {
  padding: var(--spacing-md);
  gap: var(--spacing-sm);
}

.section {
  margin-bottom: var(--spacing-lg);
}

Für größere Projekte empfiehlt sich die Erstellung einer wiederverwendbaren SCSS-Funktion, die Pixel-Werte automatisch in VW-Einheiten umrechnet. Dies beschleunigt die Entwicklung erheblich und sorgt für Konsistenz im gesamten Projekt. Die Basis-Viewport-Breite sollte der Breite Ihres Design-Systems entsprechen – in der Regel 1920px für Desktop-First oder 375px für Mobile-First-Projekte.

// SCSS-Funktion mit 1920px Basis
@function vw($pixels, $base: 1920) {
  @return calc($pixels / $base * 100vw);
}

// Anwendungsbeispiele
.heading {
  font-size: vw(48);          // = 2,5vw
  margin-bottom: vw(32);      // = 1,67vw
  letter-spacing: vw(2);      // = 0,1vw
}

.container {
  padding: vw(64) vw(120);    // = 3,33vw 6,25vw
  max-width: vw(1400);        // = 72,92vw
}