Konverta Logo
Konverta
Zuletzt aktualisiert: 2. Februar 2025

Viewport-Rechner

Professioneller CSS Viewport-Rechner für responsive Webdesign. Rechnen Sie vw, vh, vmin, vmax Einheiten um und optimieren Sie Ihre Frontend-Entwicklung.

📐

Viewport-Rechner

CSS Viewport-Einheiten umrechnen für responsive Webdesign

📱 Viewport-Abmessungen

Für rem/em Berechnung (Standard: 16px)

Aktueller Breakpoint:
xxl
Extra extra large devices

🔄 Wert-Umrechnung

📚 Viewport-Einheiten erklärt

vw
Viewport Width

1% der Viewport-Breite

1vw = Viewport-Breite ÷ 100
vh
Viewport Height

1% der Viewport-Höhe

1vh = Viewport-Höhe ÷ 100
vmin
Viewport Minimum

1% der kleineren Viewport-Dimension

1vmin = min(vw, vh)
vmax
Viewport Maximum

1% der größeren Viewport-Dimension

1vmax = max(vw, vh)

🎯 Gerätekategorien

iPhone 15 Pro
Beliebt
393 × 852 px
mobile
0.46 Ratio
iPhone 15 Pro Max
Beliebt
430 × 932 px
mobile
0.46 Ratio
Samsung Galaxy S24
Beliebt
360 × 780 px
mobile
0.46 Ratio
Google Pixel 8
Beliebt
412 × 915 px
mobile
0.45 Ratio
iPhone SE
375 × 667 px
mobile
0.56 Ratio
iPad Pro 12.9"
Beliebt
1024 × 1366 px
tablet
0.75 Ratio
iPad Air 10.9"
Beliebt
820 × 1180 px
tablet
0.69 Ratio
iPad mini
Beliebt
744 × 1133 px
tablet
0.66 Ratio
Samsung Galaxy Tab S9
Beliebt
800 × 1280 px
tablet
0.63 Ratio
Microsoft Surface Pro
912 × 1368 px
tablet
0.67 Ratio
MacBook Air 13"
Beliebt
1470 × 956 px
desktop
1.54 Ratio
MacBook Pro 14"
Beliebt
1512 × 982 px
desktop
1.54 Ratio
MacBook Pro 16"
Beliebt
1728 × 1117 px
desktop
1.55 Ratio
Full HD (1080p)
Beliebt
1920 × 1080 px
desktop
1.78 Ratio
QHD (1440p)
Beliebt
2560 × 1440 px
desktop
1.78 Ratio
4K (2160p)
Beliebt
3840 × 2160 px
desktop
1.78 Ratio
Ultrawide 21:9
3440 × 1440 px
desktop
2.39 Ratio
55" 4K TV
Beliebt
3840 × 2160 px
tv
1.78 Ratio
65" 4K TV
Beliebt
3840 × 2160 px
tv
1.78 Ratio
75" 4K TV
3840 × 2160 px
tv
1.78 Ratio

📊 CSS Framework Breakpoints

NameMin WidthMax WidthBeschreibungStatus
xs0px575pxExtra small devices (phones)
sm576px767pxSmall devices (phones, large)
md768px991pxMedium devices (tablets)
lg992px1199pxLarge devices (desktops)
xl1200px1399pxExtra large devices
xxl1400px∞Extra extra large devices
✓ Aktiv

📱 Responsive Design Tipps

• vw/vh: Ideal für Full-Screen-Elemente und Hero-Bereiche

• vmin: Perfekt für quadratische Elemente, die immer sichtbar bleiben

• vmax: Nützlich für Hintergrund-Elemente und Overlays

• Kombinationen: Nutzen Sie calc() für präzise Berechnungen

• Fallbacks: Immer px-Werte als Fallback definieren

💡 CSS Best Practices

• Mobile First: Beginnen Sie mit kleinen Bildschirmen

• Clamp(): Nutzen Sie clamp() für responsive Schriftgrößen

• Breakpoints: Verwenden Sie einheitliche Breakpoint-Systeme

• Testing: Testen Sie auf echten Geräten, nicht nur im Browser

• Performance: Viewport-Einheiten sind performanter als JavaScript

Quellen & Referenzen

Unsere Berechnungen basieren auf offiziellen Quellen und wissenschaftlichen Standards.

CSS Framework Breakpoints

  • Bootstrap: xs, sm, md, lg, xl, xxl
  • Tailwind: sm, md, lg, xl, 2xl
  • Material: xs, sm, md, lg, xl
  • Foundation: small, medium, large

CSS Viewport-Einheiten Masterclass für Frontend-Entwickler

📐 Viewport-Einheiten verstehen

Viewport-Einheiten revolutionieren responsive Design durch direkte Bezugnahme auf die Browser-Viewport-Größe. Sie ermöglichen fluid responsive Layouts ohne komplexe Media Queries.

vw (Viewport Width): 1vw = 1% der Viewport-Breite. Ideal für horizontale Skalierung, Container-Breiten und responsive Abstände.

vh (Viewport Height): 1vh = 1% der Viewport-Höhe. Perfekt für Hero-Bereiche, Full-Screen-Sections und vertikale Navigation.

🎯 Erweiterte Viewport-Techniken

vmin & vmax Strategien: vmin ist ideal für quadratische Elemente, die auf allen Geräten proportional bleiben. vmax eignet sich für Overlays und Hintergrund-Elemente.

clamp() Integration: clamp(16px, 4vw, 32px) kombiniert Viewport-Einheiten mit Mindest- und Maximalwerten für perfekte Skalierung.

calc() Kombinationen: calc(100vw - 2rem) berücksichtigt feste Abstände in viewport-basierten Berechnungen.

⚡ Performance & Best Practices

• Mobile-First: Viewport-Einheiten in mobilen Designs priorisieren

• Fallbacks: Immer px-Werte als Backup für ältere Browser

• Testing: Echte Geräte für Viewport-Testing verwenden

• iOS Safari: 100vh-Probleme mit min-height lösen

• Performance: Viewport-Einheiten sind CSS-Engine-optimiert

• Container Queries: Mit modernen @container Regeln kombinieren

Responsive Design Patterns mit Viewport-Einheiten

🎨 Layout-Patterns

Full-Screen Hero Section

height: 100vh;
min-height: 500px;
font-size: clamp(2rem, 5vw, 4rem);

Kombiniert 100vh für Full-Screen mit min-height als Fallback und responsive Schriftgröße basierend auf Viewport-Breite.

Responsive Container

width: clamp(300px, 90vw, 1200px);
padding: clamp(1rem, 5vw, 3rem);

Fluid Container mit minimaler und maximaler Breite plus viewport-proportionaler Innenabstand.

Quadratische Elemente

width: 20vmin;
height: 20vmin;
aspect-ratio: 1;

vmin sorgt für perfekte Quadrate, die auf allen Bildschirmgrößen proportional skalieren.

📱 Framework-Integration

Bootstrap + Viewport

@include media-breakpoint-up(md) {
  font-size: clamp(1.2rem, 2.5vw, 2rem);
}

Kombiniert Bootstrap-Breakpoints mit Viewport-basierten Schriftgrößen für optimale responsive Typography.

Tailwind + Viewport

@layer utilities {
  .h-screen-safe {
    height: calc(100vh - 5rem);
  }
}

Custom Tailwind-Utilities für viewport-basierte Höhen mit Mobile-Safari-kompatiblen Berechnungen.

CSS Grid + Viewport

grid-template-columns: 1fr clamp(200px, 25vw, 300px) 1fr;
gap: clamp(1rem, 3vw, 2rem);

CSS Grid mit viewport-responsiven Spalten und Abständen für automatische Layout-Anpassung ohne Media Queries.

Moderne CSS Features & Viewport-Integration

🆕 Container Queries

@container (min-width: 50vw) {
  .card {
    font-size: 1.2rem;
  }
}

Element-basierte Queries: Container reagieren auf ihre eigene Größe

Viewport-Integration: Kombiniert mit vw/vh für flexible Layouts

Browser-Support: Chrome 105+, Firefox 110+, Safari 16+

🎨 CSS :has() Selector

.section:has(.fullscreen) {
  height: 100vh;
  overflow: hidden;
}

Parent-Selection: Styles basierend auf Child-Elementen

Viewport-Conditioning: Layout-Änderungen bei bestimmten Inhalten

Responsive Logic: Intelligente Viewport-Anpassungen

📐 CSS Subgrid

.parent {
  grid: subgrid / subgrid;
  height: 100vh;
}

Grid-Inheritance: Child-Grids übernehmen Parent-Grid-Struktur

Viewport-Alignment: Bessere Kontrolle über viewport-hohe Layouts

Complex Layouts: Vereinfacht verschachtelte responsive Designs

💡 Häufige Viewport-Probleme & Professionelle Lösungen

❌ Typische Probleme

  • • 100vh auf iOS Safari (Mobile Address Bar Problem)
  • • Horizontales Scrollen durch 100vw bei Scrollbars
  • • Zu kleine Touch-Targets bei vw-basierten Elementen
  • • Performance-Probleme bei exzessiven Viewport-Animationen
  • • Unlesbare Schriftgrößen bei extremen Viewport-Größen
  • • Browser-Kompatibilität bei älteren Versionen

✅ Professionelle Lösungen

  • • CSS Custom Properties: --vh für dynamische Viewport-Höhe
  • • Scrollbar-Gutter für konsistente 100vw-Breiten
  • • clamp() für begrenzte Viewport-Skalierung
  • • will-change für optimierte Viewport-Animationen
  • • Progressive Enhancement mit px-Fallbacks
  • • Feature Queries: @supports für Viewport-Features

Häufig gestellte Fragen zum Viewport-Rechner

Was sind CSS Viewport-Einheiten und wofür werden sie verwendet?
Viewport-Einheiten (vw, vh, vmin, vmax) sind CSS-Maßeinheiten, die sich auf die Größe des Browser-Viewports beziehen. 1vw = 1% der Viewport-Breite, 1vh = 1% der Viewport-Höhe. Sie ermöglichen responsive Designs ohne Media Queries und sind ideal für Full-Screen-Elemente, Hero-Bereiche und adaptive Schriftgrößen.
Was ist der Unterschied zwischen vw, vh, vmin und vmax?
vw (viewport width) = 1% der Viewport-Breite, vh (viewport height) = 1% der Viewport-Höhe, vmin = 1% der kleineren Viewport-Dimension (min(vw, vh)), vmax = 1% der größeren Viewport-Dimension (max(vw, vh)). vmin ist ideal für quadratische Elemente, vmax für Overlays und Hintergründe.
Wie berechne ich responsive Schriftgrößen mit Viewport-Einheiten?
Verwenden Sie clamp() für responsive Schriftgrößen: clamp(16px, 4vw, 24px) bedeutet mindestens 16px, maximal 24px, ideal 4% der Viewport-Breite. Alternativ: font-size: calc(16px + 1vw) für eine Mischung aus fester Basis und viewport-abhängiger Skalierung. Testen Sie verschiedene Bildschirmgrößen.
Welche Browser unterstützen CSS Viewport-Einheiten?
Alle modernen Browser unterstützen Viewport-Einheiten: Chrome 26+, Firefox 19+, Safari 6.1+, Edge 12+, iOS Safari 6+, Android Browser 4.4+. Bei älteren Browsern (IE 9-11) gibt es teilweise Bugs. Verwenden Sie immer px-Fallbacks: font-size: 20px; font-size: 4vw; für bessere Kompatibilität.
Was sind die häufigsten Probleme bei Viewport-Einheiten auf Mobilgeräten?
Mobile Browser ändern die Viewport-Größe beim Scrollen (Address Bar versteckt sich). iOS Safari hat 100vh-Probleme. Lösungen: Verwenden Sie 100vh nur für echte Full-Screen-Elemente, nutzen Sie min-height statt height, oder CSS Custom Properties mit JavaScript für dynamische Viewports: --vh: window.innerHeight/100.
Wie verwende ich Viewport-Einheiten für responsive Container?
Für responsive Container: width: 90vw; max-width: 1200px; margin: 0 auto; Für Hero-Bereiche: height: 100vh; min-height: 500px; Für Cards: width: clamp(300px, 30vw, 400px); Für Sidebars: width: clamp(250px, 20vw, 350px); Kombinieren Sie immer mit min/max-Werten für Grenzen.
Welche CSS Frameworks nutzen Viewport-Einheiten in ihren Breakpoint-Systemen?
Bootstrap 5: xs(<576px), sm(≥576px), md(≥768px), lg(≥992px), xl(≥1200px), xxl(≥1400px). Tailwind CSS: sm(≥640px), md(≥768px), lg(≥1024px), xl(≥1280px), 2xl(≥1536px). Material Design: xs(<600px), sm(≥600px), md(≥960px), lg(≥1280px), xl(≥1920px). Foundation: small(<640px), medium(≥640px), large(≥1024px).
Wie debugge ich Viewport-Einheiten in den Browser-Entwicklertools?
Chrome DevTools: Responsive Design Mode (Strg+Shift+M), wählen Sie Geräte oder custom sizes. Firefox: Responsive Design Mode (F12 → responsive icon). Safari: Develop Menu → Responsive Design Mode. Verwenden Sie console.log(window.innerWidth, window.innerHeight) für JavaScript-Debugging. CSS: outline: 1px solid red; für visuelle Überprüfung.
Kann ich Viewport-Einheiten mit CSS Grid und Flexbox kombinieren?
Ja, sehr gut kombinierbar! Grid: grid-template-columns: 1fr 50vw 1fr; grid-template-rows: 10vh 1fr 5vh; Flexbox: flex-basis: 30vw; Für responsive Gaps: gap: clamp(1rem, 2vw, 3rem); Container Queries (neu): @container (min-width: 50vw) für noch bessere Kontrolle. Testen Sie verschiedene Kombinationen.
Wie optimiere ich die Performance bei vielen Viewport-Einheiten?
Viewport-Einheiten sind sehr performant, da sie von der CSS-Engine nativ unterstützt werden. Vermeiden Sie: Excessive JavaScript-Viewport-Berechnungen, zu viele gleichzeitige Animationen mit Viewport-Einheiten. Nutzen Sie: CSS Custom Properties für wiederverwendbare Werte, will-change für animierte Elemente, contain-Eigenschaften für Isolation.
Welche Alternativen gibt es zu Viewport-Einheiten für responsive Design?
Alternativen: Media Queries (breakpoint-basiert), Container Queries (element-basiert), CSS calc() mit rem/em, Fluid Typography mit clamp(), CSS Grid mit fr-Einheiten, Flexbox mit flex-grow/shrink. Moderne Ansätze: intrinsic web design, container-based design, CSS Subgrid für komplexe Layouts.
Wie implementiere ich einen Viewport-basierten Dark Mode?
Verwenden Sie CSS Custom Properties: :root { --bg: white; --text: black; } @media (prefers-color-scheme: dark) { :root { --bg: black; --text: white; } } .hero { background: var(--bg); color: var(--text); height: 100vh; font-size: clamp(2rem, 5vw, 4rem); } Kombiniert responsive Design mit Theme-Switching.
Was sind die neuesten CSS Features für responsive Design 2024?
Container Queries: @container (min-width: 400px) für element-basierte Queries. CSS :has() für parent-selectors. CSS Subgrid für komplexe Grid-Layouts. CSS @layer für bessere Cascade-Kontrolle. CSS math functions: round(), mod(), rem(). CSS Cascade Layers für framework-kompatibles CSS. Alle kombinierbar mit Viewport-Einheiten.
Wie erstelle ich eine optimale Mobile-First Strategie mit Viewport-Einheiten?
Mobile-First Approach: 1) Basis-Styles mit kleinen Viewports (320px+). 2) Verwenden Sie vw für horizontale, vh für vertikale Skalierung. 3) Progressively enhance mit Media Queries. 4) Testen Sie auf echten Geräten. 5) Nutzen Sie clamp() für flexible Bereiche. 6) Berücksichtigen Sie Touch-Targets (min 44px). 7) Performance zuerst.
Welche Tools und Ressourcen helfen bei der Viewport-Entwicklung?
Entwicklungstools: Chrome/Firefox DevTools Responsive Mode, BrowserStack für echte Geräte, ResponsiveDesignChecker.com, Am I Responsive Tool. CSS Tools: CSS clamp() calculator, Viewport unit calculator, Media query tester. Testing: Real device labs, Cross-browser testing services, Performance monitoring tools wie Lighthouse.

Viewport-Größen – Responsive Design 2026

Der Viewport ist der sichtbare Bereich einer Webseite im Browser. Für responsives Design müssen Layouts für verschiedene Viewport-Größen optimiert werden. Unser Rechner zeigt gängige Breakpoints und hilft bei der Berechnung von Viewport-Units.

Gängige Breakpoints 2026

GerätetypBreite (CSS px)Tailwind-KlasseMarktanteil DE
Smartphone (klein)320–374 px–~5 %
Smartphone (standard)375–430 pxsm: 640px~55 %
Tablet (Portrait)768–834 pxmd: 768px~8 %
Tablet (Landscape)1024–1180 pxlg: 1024px~5 %
Desktop1280–1920 pxxl: 1280px~25 %
Ultrawide / 4K2560+ px2xl: 1536px~2 %

Viewport-Tipps für Entwickler

  • ●Mobile First: Immer zuerst für die kleinste Ansicht designen, dann mit Breakpoints nach oben erweitern.
  • ●dvh statt vh: Die neuen Dynamic Viewport Units (dvh, svh, lvh) berücksichtigen mobile Browser-Toolbars.
  • ●Container Queries: Seit 2023 in allen Browsern – Layout abhängig von Elternelement statt Viewport.
  • ●clamp() nutzen: Fluid Typography mit clamp(1rem, 2.5vw, 2rem) statt fester Breakpoints für Schriftgrößen.
  • ●Meta-Viewport: Immer <meta name="viewport" content="width=device-width, initial-scale=1"> setzen.

Ihre Rechner-Reise

Nutzen Sie diese Tools für eine vollständige Analyse

1DPI-Rechner
2PPI-Rechner
3Aspect Ratio
4Schärfentiefe

Weitere hilfreiche Tools

VerwandtDesign

Aspect Ratio Rechner

Aspect Ratio Rechner berechnen und vergleichen

ErgänzungDesign

Bildaufloesung Rechner

Bildaufloesung Rechner berechnen und vergleichen

Nächster SchrittDesign

Brennweiten Aequivalent Rechner

Brennweiten Aequivalent Rechner berechnen und vergleichen

AlternativeDesign

Dpi Rechner

Dpi Rechner berechnen und vergleichen

Ähnliche Rechner & Tools

Längen-Konverter

Konvertieren Sie zwischen Metern, Kilometern, Zoll, Fuß, Yards, Seemeilen und mehr.

Einheiten

Gewicht-Konverter

Rechnen Sie zwischen Kilogramm, Pfund, Unzen, Tonnen, Steinen und Karat um.

Einheiten

Geschwindigkeits-Konverter

Konvertieren Sie zwischen km/h, mph, m/s, Knoten und Mach.

Einheiten

Zeitzonen-Konverter

Rechnen Sie Uhrzeiten zwischen verschiedenen Zeitzonen um. Mit aktuellen Weltzeiten und Sommerzeit-Berücksichtigung.

Alltags-Tools

Druck-Konverter

Konvertieren Sie zwischen Bar, PSI, Pascal, Atmosphäre und anderen Druckeinheiten.

Einheiten

Prozent-Rechner - Rabatt MwSt Trinkgeld berechnen

Kostenloser Prozent-Rechner für Deutschland: Prozentsätze, Rabatte, MwSt (19% 7%), Trinkgeld und prozentuale Änderungen schnell berechnen. Mit Formeln, Beispielen und Deutschland-spezifischen Steuersätzen.

Finanzen
Alle general Tools →Alle Konverter →