Viewport width
0px
vw
← All tools
CSS viewport calculator
CSS Viewport Units Calculator
Convert vw, vh, vmin, vmax, dvh, svh, and lvh units into pixels using the current or custom viewport.
Calculate viewport units
Use your live viewport or enter custom dimensions to calculate CSS viewport unit values.
Viewport height
0px
vh
Dynamic height
0px
dvh
Small viewport height
0px
svh
Large viewport height
0px
lvh
Smallest side
0px
vmin
Largest side
0px
vmax
CSS example
.hero {
min-height: 100dvh;
width: 100vw;
}Week 3 tool cluster guide
100vh vs 100dvh
Classic 100vh can feel wrong on mobile because browser address bars and toolbars change the visible height. Dynamic viewport units give developers better control over mobile layouts.
Use 100dvh for app-like sections
Dynamic viewport height follows the visible viewport and is usually better for full-height mobile panels.
Use svh/lvh for predictable bounds
Small and large viewport height units help when you need the minimum or maximum possible viewport height state.
Keep fallbacks simple
Pair modern units with normal min-height, overflow handling, and responsive testing for better compatibility.
Frequently asked questions
What does 100vw mean?
100vw equals the full viewport width in CSS pixels.
What is the difference between vh and dvh?
vh is the layout viewport height, while dvh reflects the dynamic visible viewport height as browser chrome changes.
Should I replace all vh with dvh?
Not always. Use dvh for mobile-sensitive full-height layouts and keep testing across devices.
Why can viewport height change?
Browser UI, address bars, zoom, orientation, and split-screen mode can change the visible viewport height.
Content cluster
Related guides
Use these supporting guides to understand the tool result and next testing steps.
Related tools
Continue with another ScreenMetricLab utility.