Viewport-Einheiten-Rechner
Pixel in vw, vh, dvh, svh, vmin und vmax umrechnen und zurück – für jede Viewport-Größe, kostenlos und ohne Anmeldung.
Der Viewport-Einheiten-Rechner wandelt Pixel in vw, vh, vmin, vmax und die modernen Einheiten dvh, svh und lvh um und umgekehrt. Du gibst die Größe des Viewports ein, zum Beispiel 1440 × 900, und erhältst alle Werte auf einmal. Auf Smartphones lohnt der Blick auf svh, lvh und dvh, weil sich dort die Browserleisten ein- und ausblenden.
Mit sichtbaren Browserleisten. Leer: gleich.
| Einheit | Ergebnis | Bedeutung | Kopieren |
|---|---|---|---|
| vw | 25vw | 1 % der Viewport-Breite | |
| dvw | 25dvw | wie vw (Breite ändert sich selten dynamisch) | |
| svw | 25svw | wie vw (kleinster Viewport) | |
| lvw | 25lvw | wie vw (größter Viewport) | |
| vh | 40vh | 1 % der Viewport-Höhe, meist wie lvh | |
| dvh | 40dvh | dynamisch: folgt der sichtbaren Höhe, wenn Browserleisten ein- und ausfahren | |
| svh | 40svh | kleiner Viewport: Browserleisten sichtbar | |
| lvh | 40lvh | großer Viewport: Browserleisten eingeklappt | |
| vmin | 40vmin | 1 % der kleineren Seite | |
| vmax | 25vmax | 1 % der größeren Seite |
Viewport-Einheiten erklärt
Viewport-Einheiten messen Größen relativ zum sichtbaren Bereich des Browsers. Sie sind ideal für Vollbild-Sektionen, fließende Typografie und Layouts, die sich der Bildschirmgröße anpassen.
| Einheit | Bezug |
|---|---|
vw | 1 % der Viewport-Breite |
dvw | wie vw (Breite ändert sich selten dynamisch) |
svw | wie vw (kleinster Viewport) |
lvw | wie vw (größter Viewport) |
vh | 1 % der Viewport-Höhe, meist wie lvh |
dvh | dynamisch: folgt der sichtbaren Höhe, wenn Browserleisten ein- und ausfahren |
svh | kleiner Viewport: Browserleisten sichtbar |
lvh | großer Viewport: Browserleisten eingeklappt |
vmin | 1 % der kleineren Seite |
vmax | 1 % der größeren Seite |
So gehst du vor
- Viewport-Größe deines Zielgeräts eintragen.
- Pixelwert aus dem Design eingeben und alle Einheiten ablesen.
- Für Smartphones svh, lvh und dvh gegenprüfen.
Beispiel
Ein Design für 1440 × 900 px hat einen 360 px breiten Seitenbereich. Das sind 25 vw. Damit bleibt der Bereich bei jeder Breite ein Viertel. Für Größen, die zwischen zwei Breiten sanft wachsen, nutzt du den clamp()-Rechner. Klassische Einheiten rechnet der PX-REM-EM-Umrechner um.
Häufige Fragen
Was ist der Unterschied zwischen vh, dvh, svh und lvh?
vh bezieht sich auf den großen Viewport. svh gilt für den kleinen Viewport mit sichtbaren Browserleisten, lvh für den großen ohne. dvh passt sich dynamisch an, wenn sich die Leisten beim Scrollen bewegen. Für Vollbild-Bereiche auf dem Smartphone ist dvh oft die beste Wahl.
Wie rechne ich Pixel in vw um?
Teile den Pixelwert durch die Viewport-Breite und multipliziere mit 100. 360 px bei 1440 px Breite sind 25 vw.
Warum ist 100vh auf dem Handy manchmal zu hoch?
Klassisches vh bezieht sich auf den großen Viewport ohne Browserleisten. Sind die Leisten sichtbar, ragt das Element über den Bildschirm hinaus. Mit svh oder dvh passiert das nicht.
Wann nutze ich vmin und vmax?
vmin nimmt die kleinere Seite als Basis und eignet sich für Elemente, die in Hoch- und Querformat ins Bild passen sollen. vmax nimmt die größere Seite.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.