Viewport Rechner
Hilft bei responsiven Layouts und CSS-Viewport-Einheiten.
Dieses Tool ist für Mitglieder
Dieses Premium-Tool schaltest du mit einem kostenlosen Konto frei — zusammen mit allen anderen Profi-Tools und den ganzen Wissen-Artikeln.
100 % kostenlos · keine Kreditkarte · sofort freigeschaltet
Wozu dient der Viewport Rechner?
Der Viewport Rechner wandelt einen Pixelwert in die CSS-Viewport-Einheiten vw, vh, vmin und vmax um. Diese Einheiten sind relativ zur Bildschirmgröße und damit ideal für responsive Layouts, bei denen Elemente proportional zum Viewport skalieren sollen.
Du gibst den Pixelwert sowie die Breite und Höhe des Viewports ein, und das Tool berechnet die entsprechenden Werte in allen vier Einheiten. So findest du schnell heraus, welcher vw- oder vh-Wert einem konkreten Pixelmaß entspricht. Die Berechnung läuft komplett in deinem Browser.
Beispiele
- 48 px bei einer Viewport-Breite von 1920 px entsprechen 2,5 vw.
- 100 px bei 1080 px Viewport-Höhe ergeben rund 9,26 vh.
- Bei einem Viewport von 1280 x 800 entsprechen 40 px etwa 5 vmin.
Häufige Fragen zum Viewport Rechner
Was bedeuten vw und vh?
1vw entspricht einem Prozent der Viewport-Breite, 1vh einem Prozent der Viewport-Höhe. Bei 1920 px Breite ist 1vw also 19,2 px.
Was ist der Unterschied zwischen vmin und vmax?
vmin bezieht sich auf die kleinere der beiden Viewport-Dimensionen, vmax auf die größere. Das ist nützlich, damit Elemente unabhängig von Hoch- oder Querformat funktionieren.
Sollte ich Schriftgrößen in vw setzen?
Reine vw-Schriften können auf kleinen Screens zu klein und auf großen zu groß werden. Für Typografie ist oft clamp() mit Min- und Max-Grenze die bessere Wahl.
Werden meine Eingaben gespeichert?
Nein. Alle Berechnungen laufen ausschließlich im Browser. Es werden keine Daten gesendet oder gespeichert.
Ist das Tool kostenlos?
Ja, vollständig kostenlos und ohne Registrierung.
