PX-zu-VH-Rechner
Wandeln Sie Pixel einfach in Viewport-Höhe (vh) um – mit Mobile-Browser-Lösungen (dvh/svh), calc()-Beispielen und Best Practices für responsives Design.
(100px ÷ 1080px) × 100 = 9.26vh
Höhe des Viewports in Pixeln (z.B. 1080px für Desktop)
So verwenden Sie unseren PX-zu-VH-Rechner
Mit unserem Rechner rechnen Sie px ganz einfach in vh um. Erfahren Sie, wie Sie Pixel in drei einfachen Schritten in Viewport-Höhe-Einheiten für responsives Webdesign umrechnen.
Viewport-Höhe einstellen
Geben Sie die Viewport-Höhe in Pixeln ein. Typische Werte sind 1080px für Desktop-Monitore, 1024px für Tablets oder 667px für Mobilgeräte.
Pixelwert eingeben
Geben Sie den Pixelwert ein, den Sie umwandeln möchten. Der Converter akzeptiert ganze Zahlen und Dezimalzahlen für genaue Messungen.
VH-Ergebnis abrufen
Der Rechner berechnet den VH-Wert sofort. Kopieren Sie das Ergebnis und verwenden Sie es in Ihrem CSS für responsive, viewport-basierte Layouts.
PX vs. VH: Den Unterschied verstehen
Erfahren Sie die wichtigsten Unterschiede zwischen Pixeln und Viewport-Höhe-Einheiten für responsives Design und flüssige Layouts.
Was sind Pixel (PX)?
Feste Größeneinheit
Pixel sind absolute Einheiten, die ihre Größe unabhängig vom Viewport beibehalten. 100px bleibt immer 100px.
Begrenzte Flexibilität
Pixelbasierte Höhen passen sich nicht an verschiedene Bildschirmgrößen an, was responsives Design erschwert.
Beste Anwendungsfälle
Ideal für Rahmen, Elemente mit fester Höhe und Designs, bei denen genaue Kontrolle erforderlich ist.
Was sind Viewport-Höhe (VH) Einheiten?
Relativ zur Viewport-Höhe
1vh entspricht 1% der Viewport-Höhe. Bei einem 1080px Bildschirm ist 1vh = 10,8px. Die Größe passt sich automatisch an die Viewport-Höhe an.
Wirklich responsiv
VH-Einheiten passen sich automatisch an die Bildschirmhöhe an - perfekt für wirklich responsive Abschnitte und Layouts, die sich proportional skalieren.
Responsives Design Vorteile
VH-basierte Layouts skalieren nahtlos über alle Gerätebildschirme hinweg, von Mobilgeräten bis zu großen Monitoren.
PX-zu-VH-Umrechnungsformel
vh = (Pixel ÷ Viewport-Höhe) × 100
Viewport-Höhe ist die Höhe des Browser-Fensters in Pixeln
Beispiel: 100px ÷ 1080px × 100 = 9,26vh
Beispiel: 50px ÷ 1080px × 100 = 4,63vh
Beispiel: 200px ÷ 1080px × 100 = 18,52vh
Schritt-für-Schritt-Berechnungsbeispiel
Schritt 1: Pixelwert identifizieren → 150px
Schritt 2: Viewport-Höhe identifizieren → 1080px
Schritt 3: Pixel durch Viewport-Höhe teilen → 150 ÷ 1080 = 0,1389
Schritt 4: Mit 100 multiplizieren → 0,1389 × 100 = 13,89vh
Ergebnis: 150px = 13,89vh bei einem 1080px-Viewport
PX-zu-VH-Umrechnungstabellen
Schnellübersichtstabellen für häufige Pixel-zu-VH-Umrechnungen. Verwenden Sie diese als Referenz für Ihre responsiven Designs über verschiedene Viewport-Höhen hinweg.
Desktop (Full HD): 1080px
| Pixel | VH |
|---|---|
| 50px | 4,63vh |
| 100px | 9,26vh |
| 150px | 13,89vh |
| 200px | 18,52vh |
| 300px | 27,78vh |
| 400px | 37,04vh |
Tablet: 1024px
| Pixel | VH |
|---|---|
| 50px | 4,88vh |
| 100px | 9,77vh |
| 150px | 14,65vh |
| 200px | 19,53vh |
| 300px | 29,30vh |
| 400px | 39,06vh |
Mobilgeräte (iPhone): 667px
| Pixel | VH |
|---|---|
| 20px | 3,00vh |
| 50px | 7,50vh |
| 100px | 14,99vh |
| 150px | 22,49vh |
| 200px | 29,99vh |
| 300px | 44,98vh |
💡Profi-Tipp: Umrechnungstabellen verwenden
Diese Referenztabellen sind perfekt zum schnellen Nachschlagen beim Erstellen responsiver Layouts. Denken Sie daran, dass VH-Werte immer relativ zur Viewport-Höhe sind - wählen Sie die Tabelle, die Ihrer Zielgerätegröße entspricht. Für benutzerdefinierte Werte verwenden Sie unseren Rechner oben.
Praktische CSS-Beispiele
Sehen Sie, wie Sie Pixel-zu-VH-Umrechnung in echtem CSS-Code für häufige responsive Design-Szenarien verwenden.
❌ Feste Höhe (Pixel)
.hero-section {
height: 600px;
padding: 80px 20px;
}
.content-block {
min-height: 400px;
margin-bottom: 60px;
}
.footer {
height: 200px;
padding: 40px 20px;
}Dieses Layout mit fester Höhe skaliert nicht mit dem Viewport und kann auf verschiedenen Bildschirmgrößen unverhältnismäßig aussehen.
✓ Responsiv (VH-Einheiten)
.hero-section {
height: 55.56vh;
padding: 7.41vh 20px;
}
.content-block {
min-height: 37.04vh;
margin-bottom: 5.56vh;
}
.footer {
height: 18.52vh;
padding: 3.70vh 20px;
}Dieses responsive Layout skaliert proportional mit dem Viewport und bietet ein konsistentes visuelles Erlebnis über alle Bildschirmgrößen hinweg.
Vollhöhen-Abschnitte
/* Desktop (1080px) */
.hero {
height: 100vh; /* Volle Viewport-Höhe */
}
.split-section {
min-height: 50vh; /* Halbe Viewport-Höhe */
}
.content-block {
padding-top: 9.26vh; /* 100px */
padding-bottom: 9.26vh; /* 100px */
}Vollhöhen-Abschnitte passen sich perfekt an die Bildschirmhöhe an und sorgen für eindrucksvolle, bildschirmfüllende Layouts.
Vertikales Abstandssystem
/* Basis: 1080px Viewport */
.section {
padding-top: 9.26vh; /* 100px */
padding-bottom: 9.26vh; /* 100px */
}
.card-stack {
gap: 3.70vh; /* 40px */
}
.button {
padding: 1.48vh 2.08vw; /* 16px 40px */
margin-bottom: 2.78vh; /* 30px */
}Der vertikale Abstand skaliert proportional und sorgt für einen konsistenten visuellen Rhythmus über verschiedene Viewport-Höhen hinweg.
⚠️Häufige Fehler zum Vermeiden
VH für kleine Elemente verwenden
Vermeiden Sie VH für Rahmen, Symbole oder kleine UI-Elemente, die konsistent bleiben sollten. Verwenden Sie stattdessen Pixel oder rem.
Mobile Browser-Adressleiste ignorieren (Kritisches Problem!)
In mobilen Browsern (Safari, Chrome) wird 100vh auf die Bildschirmhöhe OHNE Adressleiste gesetzt, was zu abgeschnittenem Inhalt führt, wenn die Adressleiste sichtbar ist. Dies ist ein häufiges Problem in Safari und Chrome Mobile.
Lösung: Neue Viewport-Einheiten verwenden (2023+)
dvh- Dynamische Viewport-Höhe: passt sich an, wenn die Adressleiste erscheint/verschwindetsvh- Kleine Viewport-Höhe: berücksichtigt immer die Adressleiste (am sichersten)lvh- Große Viewport-Höhe: Viewport ohne Adressleiste
/* Alte Methode - Probleme auf Mobilgeräten */
.hero { height: 100vh; }
/* Neue Methode - funktioniert perfekt */
.hero { height: 100dvh; }Keine Min/Max-Einschränkungen
Verwenden Sie immer min() oder max() Funktionen, um zu verhindern, dass Abschnitte zu groß oder zu klein werden: height: min(80vh, 800px)
Inhalt-Überlauf nicht berücksichtigen
Bei Verwendung von festen VH-Werten stellen Sie sicher, dass der Inhalt passt oder verwenden Sie min-height statt height.
Moderne CSS-Lösungen: VH sicher verwenden
Lernen Sie, wie Sie Viewport-Einheiten mit clamp(), min() und max() Funktionen für bessere responsive Designs verwenden, die auf allen Geräten perfekt funktionieren.
🎯 clamp() Funktion - Best Practice
Die clamp()-Funktion legt einen Minimal-, Vorzugs- und Maximalwert fest. So stellen Sie sicher, dass Abschnitte nie zu klein oder zu groß werden, und erhalten optimale Kontrolle über vh-Einheiten.
/* Responsive Höhe mit Grenzen */
.hero {
height: clamp(400px, 55.56vh, 800px);
/* Min: 400px, Bevorzugt: 55.56vh, Max: 800px */
}
.section {
min-height: clamp(300px, 40vh, 600px);
/* Skaliert von 300px bis 600px */
}
.card {
height: clamp(200px, 27.78vh, 500px);
/* Flexible Höhe mit Limits */
}✓ Flexibilität-Gewinn: Ihre Layouts passen sich verschiedenen Bildschirmhöhen an, während sie gleichzeitig sinnvolle Grenzen einhalten.
⚡ min() und max() Funktionen
Verwenden Sie min(), um die Maximalhöhe zu begrenzen, und max(), um die Minimalhöhe festzulegen. Ideal, um zu verhindern, dass Abschnitte zu hoch oder zu niedrig werden.
/* Max: 800px */
.hero {
height: min(80vh, 800px);
}
/* Min: 400px */
.content {
min-height: max(40vh, 400px);
}
/* Responsive Höhe mit Max-Limit */
.section {
height: min(100vh, 1000px);
/* 100% Viewport, maximal 1000px */
}💡 Profi-Tipp: Kombinieren Sie min() und max() mit calc() für noch mehr Kontrolle über responsive Höhenbestimmung.
🔧 Mobile Browser-Problem beheben
100vh berücksichtigt die Browser-Adressleiste auf Mobilgeräten nicht korrekt, was zu unerwartetem Verhalten führt. Hier sind die Lösungen:
/* Lösung 1: dvh (Dynamic Viewport Height) */
.hero {
height: 100dvh; /* Passt sich an Adressleiste an */
}
/* Lösung 2: svh (Small Viewport Height) */
.section {
min-height: 100svh; /* Kleinste mögliche Höhe */
}
/* Lösung 3: lvh (Large Viewport Height) */
.fullscreen {
height: 100lvh; /* Größte mögliche Höhe */
}
/* Lösung 4: JavaScript-Fix für ältere Browser */
.hero {
height: 100vh;
height: calc(var(--vh, 1vh) * 100);
}Hinweis: dvh, svh und lvh sind neuere Viewport-Einheiten mit besserer Mobile-Browser-Handhabung, prüfen Sie jedoch die Browser-Unterstützung vor der Verwendung.
🎨 Hybrid-Ansatz: VH + andere Einheiten
Kombinieren Sie vh für responsive Skalierung mit anderen Einheiten für präzisere Kontrolle. So erhalten Sie flexible und dennoch vorhersehbare Layouts.
/* Hero mit Header-Abzug */
.hero {
height: calc(100vh - 80px);
/* Volle Höhe minus fester Header */
}
/* Flexible Padding */
.section {
padding: calc(2rem + 3vh) 1rem;
/* Feste Basis + Viewport-Skalierung */
}
/* Min-Height mit Padding */
.content {
min-height: calc(100vh - 200px);
padding: 5vh 2rem;
}
/* Media Query Anpassungen */
@media (max-width: 768px) {
.hero {
height: calc(100dvh - 60px);
}
}🎯 Best Practice: Dieser Ansatz kombiniert die Flexibilität von VH mit der Präzision fester Einheiten - das Beste aus beiden Welten!
Schnellvergleich: Wann welchen Ansatz verwenden
| Methode | Am besten für | Mobile Support | Browser-Unterstützung |
|---|---|---|---|
| Reines VH | Vollhöhen-Abschnitte, Hero-Bereiche | ⚠ Adressleisten-Problem | ✓ Ausgezeichnet |
| clamp() | Abschnitte, responsive Höhen | ✓ Ausgezeichnet | ✓ Gut (IE nicht unterstützt) |
| min()/max() | Höhenbegrenzung, Überlauf verhindern | ✓ Gut | ✓ Gut (IE nicht unterstützt) |
| VH + calc() | Header/Footer-Abzüge, präzise Layouts | ✓ Ausgezeichnet | ✓ Ausgezeichnet |
| dvh/svh/lvh | Moderne Projekte, mobile Browser | ✓ Perfekt | ⚠ Begrenzt (neuere Browser) |
Wann sollte ich PX in VH umrechnen?
Zu wissen, wann man PX in VH umrechnet, ist für CSS Best Practices unerlässlich. Verwenden Sie unseren PX-zu-VH-Rechner für diese häufigen Szenarien.
Verwenden Sie VH-Einheiten für:
- ✓Hero-Abschnitte und vollhöhen Banner
- ✓Vertikales Abstandssystem, das sich mit dem Viewport skaliert
- ✓Vollbild-Overlays und Modals
- ✓Abschnitte, die proportionen über Geräte hinweg beibehalten sollten
- ✓Landing Pages mit viewport-basierten Designs
Verwenden Sie Pixel für:
- •Feste Header und Footer
- •Rahmen und Rahmenbreiten
- •Symbole und kleine UI-Elemente
- •Komponenten mit inhaltsabhängiger Höhe
- •Elemente, die präzise, konsistente Größenanpassung erfordern
Häufig gestellte Fragen: PX zu VH umrechnen
Antworten auf die häufigsten Fragen zur Umrechnung von Pixeln in vh-Einheiten, Mobile-Browser-Probleme (dvh/svh/lvh), Browser-Kompatibilität, calc()-Verwendung und Best Practices für responsives CSS-Design.
Wie rechne ich PX in VH um?
Um PX in VH umzurechnen, teilen Sie den Pixelwert durch die Viewport-Höhe und multiplizieren das Ergebnis mit 100. Die Formel lautet: vh = (px ÷ Viewport-Höhe) × 100. Beispiel: Bei einem 100px großen Element und einem 1080px Viewport: 100 ÷ 1080 × 100 = 9,26vh. Unser PX-zu-VH-Rechner führt diese Berechnung automatisch für Sie durch.
Welche Viewport-Höhe sollte ich für die Umrechnung verwenden?
Die Viewport-Höhe hängt von Ihrem Design-Ziel ab. Häufige Werte sind 1080px für Desktop-Designs (Full HD), 1024px für Tablets (iPad) und 667px für Mobilgeräte (iPhone 8). Wählen Sie die Viewport-Größe, die zu Ihrem primären Design-Breakpoint passt. Viele Designer verwenden 1080px als Grundlage für Desktop-first-Designs oder 667px für Mobile-first-Ansätze.
Wichtig für Deutschland:
Die häufigste Desktop-Auflösung in Deutschland ist 1920×1080 (Full HD), aber der tatsächliche Viewport ist kleiner (~1903×927px) aufgrund von Scrollleisten, Adressleiste und Taskleiste. Verwenden Sie 1080px als Basis für Berechnungen, aber testen Sie immer auf realen Geräten.
Warum verhält sich 100vh auf Mobilgeräten anders? (Häufigstes Problem!)
Dies ist eines der häufigsten Probleme mit vh-Einheiten! In mobilen Browsern (Safari, Chrome) beeinflussen die Adressleiste und die untere Navigationsleiste die Viewport-Berechnung. Mobile Browser setzen 100vh auf die Bildschirmhöhe OHNE die Adressleiste, sodass bei sichtbarer Adressleiste der Inhalt am unteren Rand abgeschnitten wird. Dies führt zu frustrierenden Layout-Problemen, bei denen Nutzer den unteren Teil Ihrer vollhöhigen Abschnitte nicht sehen können.
Lösung: Neue Viewport-Einheiten verwenden (2023+)
- •
dvh(Dynamische Viewport-Höhe): Passt sich automatisch an, wenn die Adressleiste erscheint/verschwindet - am besten für interaktive Inhalte - •
svh(Kleine Viewport-Höhe): Verwendet immer den kleinsten Viewport (mit sichtbarer Adressleiste) - sicherste Option, verhindert Überlauf - •
lvh(Große Viewport-Höhe): Verwendet den größten Viewport (Adressleiste verborgen) - mit Vorsicht verwenden
/* Ersetzen Sie dies: */
.hero { height: 100vh; }
/* Durch dies für Mobile-Kompatibilität: */
.hero { height: 100dvh; } /* oder 100svh */Was ist der Unterschied zwischen vh, dvh, svh und lvh?
Dies sind alle Viewport-Höhe-Einheiten mit unterschiedlichen Verhaltensweisen: vh (Viewport-Höhe) ist die ursprüngliche Einheit - 1vh = 1% der Viewport-Höhe. dvh (dynamische Viewport-Höhe) passt sich an dynamische UI-Elemente wie mobile Browser-Toolbars an und ändert sich, wenn diese erscheinen/verschwinden. svh (kleine Viewport-Höhe) nimmt an, dass die UI sichtbar ist (kleinster Zustand). lvh (große Viewport-Höhe) nimmt an, dass die UI verborgen ist (größter Zustand). Die neueren Einheiten (dvh, svh, lvh) haben begrenzte Browser-Unterstützung.
Kann ich VH für alle vertikalen Maße verwenden?
Nein, vh ist keine Universallösung. Verwenden Sie vh für große Layout-Abschnitte, Hero-Bereiche und vollhohe Komponenten, die sich mit dem Viewport skalieren sollen. Vermeiden Sie vh für Rahmen (nutzen Sie px), kleine UI-Elemente und Komponenten mit inhaltsabhängiger Höhe. Bei Abschnitten sollten Sie min-height statt height verwenden, um Inhalts-Überlauf zu vermeiden. Für präzise Kontrolle empfiehlt sich ein Hybrid-Ansatz: height: calc(100vh - 80px) für Header-Abzüge.
Wie verhindere ich Inhalt-Überlauf bei VH-basierten Layouts?
Es gibt mehrere Strategien: 1) Verwenden Sie min-height statt height, damit der Container wachsen kann: min-height: 100vh. 2) Fügen Sie Overflow-Handling hinzu: overflow-y: auto. 3) Verwenden Sie clamp() mit sinnvollen Grenzen: height: clamp(400px, 80vh, 1000px). 4) Kombinieren Sie mit Flexbox oder Grid für flexible Inhaltsverteilung. 5) Testen Sie auf verschiedenen Geräten und Bildschirmgrößen.
Sollte ich VH für Header und Footer verwenden?
Im Allgemeinen nein. Header und Footer sollten normalerweise feste Höhen (px oder rem) haben, um Konsistenz zu gewährleisten. Verwenden Sie VH für den Hauptinhaltsbereich: height: calc(100vh - 80px - 60px), wobei 80px die Header-Höhe und 60px die Footer-Höhe ist. Dieser Ansatz gibt Ihnen präzise Kontrolle über Navigation und Fußbereiche, während der Inhalt responsiv skaliert. Für sticky Header verwenden Sie: position: sticky; top: 0; height: 80px.
Wie kombiniere ich VH mit anderen CSS-Einheiten?
VH kombiniert gut mit anderen Einheiten über calc(): height: calc(100vh - 100px) für feste Abzüge, padding: calc(2rem + 5vh) für flexible Abstände, oder min-height: calc(50vh + 200px) für Mindesthöhen mit Puffer. Sie können auch clamp() verwenden: height: clamp(400px, 60vh, 800px). Diese Hybrid-Ansätze bieten die Flexibilität von VH mit der Präzision fester Einheiten.
Beeinträchtigt VH die Performance?
VH selbst hat minimale Performance-Auswirkungen. Allerdings können Browser beim Resize den VH-Wert neu berechnen, was bei vielen VH-basierten Elementen zu Layout-Neuberechnungen führt. Auf Mobilgeräten, wo sich durch das Scrollen die Adressleiste häufig ändert, kann traditionelles VH Performance-Probleme verursachen. Deshalb wurden dvh, svh und lvh eingeführt – sie reduzieren unnötige Neuberechnungen. Best Practice: Verwenden Sie VH sparsam für große Layout-Abschnitte, nicht für viele kleine Elemente.
Kann ich vh bei bestimmten Breakpoints zurück in px umrechnen?
Ja, Sie können vh-Werte bei bestimmten Breakpoints mit Media Queries durch feste Pixel überschreiben. Dies ist nützlich, wenn Sie flüssige Skalierung auf Desktop, aber feste Höhen auf Mobilgeräten wünschen: @media (max-width: 768px) { .hero { height: 500px; /* überschreibt vh */ } }. Alternativ: clamp() begrenzt Werte automatisch ohne Media Queries: height: clamp(400px, 60vh, 800px). Dies bietet responsive Skalierung mit automatischen Grenzen.