Ansichtsfenster-Einheitenkonverter

• Sofortige Konvertierung zwischen allen Viewport-Einheiten: Der Viewport Unit Converter konvertiert sofort Werte zwischen vw, vh, vmin, vmax, dvw, dvh, svw, svh, lvw, lvh und mehr – plus px, rem, em, pt, Prozentsätze und physikalische Einheiten. Jeder Tastendruck aktualisiert alle Ergebnisse in Echtzeit, ohne dass eine Taste gedrückt werden muss.
• Echte Gerätevoreinstellungen und benutzerdefiniertes Ansichtsfenster: Wählen Sie aus 11 Gerätevoreinstellungen – iPhone, iPad, Pixel, Galaxy und mehrere Desktop-Größen – oder geben Sie benutzerdefinierte Abmessungen des Ansichtsfensters ein. Sehen Sie genau, wie sich Ihre CSS-Werte an verschiedenen Haltepunkten verhalten, ohne die DevTools des Browsers wechseln zu müssen.
• Alle Einheiten in einer Ansicht: Sehen Sie sich alle Einheitenumrechnungen auf einmal in einer scrollbaren Ergebnistabelle an. In jeder Zeile werden der Einheitenname und der umgerechnete Wert mit einer Kopierschaltfläche mit einem Klick angezeigt. Das primäre Ergebnis wird deutlich im Kontext der aktuellen Ansichtsfensterabmessungen angezeigt.
• Schnellvoreinstellungen für CSS-Werte: Wählen Sie schnell aus 17 gängigen CSS-Werten (1, 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64, 72, 80, 96, 100) aus, um sofort zu sehen, was das Äquivalent in jeder Ansichtsfenstereinheit ist – perfekt für responsive Design-Workflows.

• Responsive CSS-Entwicklung: Front-End-Entwickler verwenden den Viewport Unit Converter, um Design-Mockup-Pixelwerte in responsive Viewport-Einheiten (vw, vh, vmin, vmax) zu übersetzen. Konvertieren Sie Schriftgrößen, Abstände und Elementabmessungen für verschiedene Ansichtsfenstergrößen ohne manuelle Berechnung.
• Mobile-First Responsive Design: Mobile-Designer verwenden den Viewport Unit Converter, um sicherzustellen, dass CSS-Werte bei allen Telefongrößen funktionieren. Testen Sie, wie eine 5vw-Schriftgröße auf einem iPhone SE (375 Pixel) im Vergleich zu einem Pixel 7 (412 Pixel) dargestellt wird, und passen Sie sie entsprechend an, um eine konsistente Typografie zu erzielen.
• Tablet- und Haltepunktplanung: Designer und Entwickler verwenden den Viewport Unit Converter, um reaktionsfähige Haltepunkte zu planen. Verstehen Sie, wie sich Ansichtsfenstereinheiten auf iPad- (744-834 Pixel) und Tablet-Größen verhalten, um eine reibungslose Skalierung zwischen Mobil- und Desktop-Layouts sicherzustellen.
• Design-zu-Code-Übergabe: Designer verwenden den Viewport Unit Converter während der Design-zu-Entwicklungs-Übergabe. Konvertieren Sie Figma-Pixelwerte in äquivalente Ansichtsfenstereinheiten mit der Zielansichtsfenstergröße und stellen Sie Entwicklern exakte CSS-Werte zur Verfügung, die der Designabsicht entsprechen.
• Große Bildschirm- und Desktop-Layouts: Desktop-Entwickler verwenden den Viewport Unit Converter, um CSS-Werte bei gängigen Desktop-Größen zu testen – 1024 Pixel, 1280 Pixel, 1366 Pixel, 1440 Pixel und 1920 Pixel. Stellen Sie sicher, dass VW-basierte Layouts von Standard-Laptops bis hin zu Ultra-Wide-Monitoren korrekt skaliert werden können.
• Schriftgrößen- und Abstandssysteme: Betreuer von Designsystemen verwenden den Viewport Unit Converter, um reaktionsfähige Schriftarten und Abstandsskalen zu erstellen. Konvertieren Sie zwischen rem (root-relativ), vw (viewport-relativ) und px (absolut), um konsistente Design-Tokens zu erstellen, die vorhersehbar skalieren.

CSS-Ansichtsfenstereinheiten sind relative Längeneinheiten, die basierend auf der Größe des Ansichtsfensters berechnet werden – dem sichtbaren Bereich einer Webseite im Browserfenster. Es gibt drei Kategorien von Ansichtsfenstereinheiten. Die klassischen Einheiten ( vw , vh , vmin , vmax ) basieren auf dem anfänglichen enthaltenden Block. Die neueren Einheiten, die in CSS Values ​​Level 4 hinzugefügt wurden, bieten eine präzisere Steuerung: dvw/dvh (dynamisch – reagiert auf Chrome-Änderungen des Browsers), svw/svh (klein – verwendet den kleinstmöglichen Ansichtsbereich) und lvw/lvh (groß – verwendet den größtmöglichen Ansichtsbereich). Mit unserem Ansichtsfenster-Einheitenkonverter können Sie zwischen all diesen Einheiten und anderen CSS-Längeneinheiten konvertieren und so reaktionsfähige Designs sicher erstellen.

1. Geben Sie Ihren Wert ein: Geben Sie einen numerischen Wert ein und wählen Sie die Quelleinheit aus (z. B. 16 vw). Verwenden Sie die gängigen CSS-Wertvoreinstellungen, um Standardabstandswerte wie 8, 16, 24, 32, 48 und 64 schnell zu testen.
2. Legen Sie die Größe des Ansichtsfensters fest: Wählen Sie eine Gerätevoreinstellung (iPhone, iPad, Desktop-Größen) oder geben Sie eine benutzerdefinierte Breite und Höhe des Ansichtsfensters ein. Die Stammschriftgröße (für rem) und die übergeordnete Schriftgröße (für em) sind ebenfalls konfigurierbar. Alle Konvertierungen werden sofort aktualisiert, wenn Sie eine Einstellung ändern.
3. Lesen Sie die Ergebnisse: Die primäre Konvertierung (in Pixel) wird deutlich angezeigt, während die vollständige Ergebnistabelle den entsprechenden Wert in jeder unterstützten Einheit anzeigt – Ansichtsfenstereinheiten, schriftbezogene Einheiten, physikalische Einheiten, Prozentsätze und mehr. Kopieren Sie einzelne Werte oder alle Werte auf einmal mit einem Klick.

• Klassische Ansichtsfenstereinheiten (vw, vh, vmin, vmax): 1vw = 1 % der Ansichtsfensterbreite, 1vh = 1 % der Ansichtsfensterhöhe, 1vmin = 1 % der kleineren Abmessung (nützlich, um sicherzustellen, dass Elemente in beide Ausrichtungen passen) und 1vmax = 1 % der größeren Abmessung. Diese basieren auf dem anfänglichen enthaltenden Block und verfügen über eine hervorragende Browserunterstützung.
• Dynamische Viewport-Einheiten (dvw, dvh, dvmin, dvmax): Diese Einheiten reagieren auf dynamische Änderungen in der Viewport-Größe, die durch das Erscheinen oder Verschwinden von Browser-Chrome (Adressleiste, Symbolleisten) beim Scrollen des Benutzers verursacht werden. In mobilen Browsern liefert Ihnen 100dvh die tatsächliche sichtbare Höhe einschließlich dynamischer Änderungen und löst so das klassische Problem „100vh umfasst die Adressleiste“.
• Kleine und große Viewport-Einheiten (svw, svh, lvw, lvh): Kleine Viewport-Einheiten verwenden die kleinstmögliche Viewport-Größe (mit vollständig sichtbarem Browser-Chrome). Große Ansichtsfenstereinheiten nutzen die größtmögliche Ansichtsfenstergröße (mit ausgeblendetem Browser-Chrome). Durch die Verwendung von 100svh wird sichergestellt, dass Ihr Element auch dann passt, wenn die Adressleiste angezeigt wird, während 100lvh den gesamten Bildschirm ausfüllt, sobald der Benutzer einen Bildlauf durchführt.
• Physikalische und schriftbezogene Einheiten: px (CSS-Pixel), pt (Punkte), cm, mm, in (Zoll), pc (Picas), q (Viertelmillimeter), rem (Wurzel-EM), em (übergeordnetes EM), ch (Zeichenbreite von „0“) und ex (x-Höhe von „x“). Der Viewport Unit Converter verarbeitet all dies zusammen mit Viewport-Einheiten für eine vollständige CSS-Längenkonvertierung.

Viewport-Einheiten sind leistungsstark, erfordern jedoch eine sorgfältige Verwendung:

• Typografie: Verwenden Sie „clamp()“ mit vw-Einheiten für responsive Schriftgrößen, die innerhalb der Mindest-/Höchstgrenzen bleiben – z. B. „font-size: clamp(16px, 2vw, 24px)“. Verwenden Sie den Konverter, um den richtigen VW-Wert für Ihre Zielpixelgröße zu finden.
• Elemente voller Höhe: Auf Mobilgeräten kann Höhe: 100 VH aufgrund von Browser-Chrome größer als der sichtbare Bereich sein. Erwägen Sie die Verwendung von 100dvh (dynamisch) oder 100lvh (groß) für Vollbild-Layouts.
• Vermeiden Sie eine übermäßige Verwendung im Textkörper: Ansichtsfenstereinheiten im Textkörper können zu Barrierefreiheitsproblemen führen, da Benutzer in einigen Browsern die Größe von Text, der vw-Einheiten verwendet, nicht ändern können. Verwenden Sie rem für den Fließtext und reservieren Sie vw für Überschriften und große Elemente.
• An mehreren Haltepunkten testen: Ein Wert, der bei 1440 Pixel funktioniert, ist möglicherweise bei 375 Pixel zu groß oder bei 2560 Pixel zu klein. Verwenden Sie den Viewport Unit Converter mit verschiedenen Gerätevoreinstellungen, um Ihre Werte über den gesamten Bereich der Viewport-Größen hinweg zu überprüfen.