CSS · Layout and visual systems
How do viewport units work?
Short answer
Viewport units are percentages of the viewport: vw and vh, with vmin and vmax for the smaller and larger dimensions. Use svh, lvh or dvh on mobile to handle browser chrome.
One vw is one percent of the viewport width, and one vh is one percent of the viewport height. vmin uses the smaller of the two dimensions, and vmax uses the larger. They are useful for full-bleed sections and fluid type, but not for everything.
.hero {
min-height: 100svh;
}
.fluid-title {
font-size: clamp(1.5rem, 4vw + 1rem, 3.5rem);
}The mobile height problem
- vh is based on the viewport, but mobile browser toolbars appear and disappear
- svh is the small viewport height with browser UI visible
- lvh is the large viewport height with browser UI retracted
- dvh is dynamic and changes as the browser UI changes
- vw can include the scrollbar in some browsers, causing horizontal overflow
For a hero that should fill the initial screen without jumping, svh is often the safest choice. For an app shell that should track the visible area, dvh can be appropriate, but expect layout changes as the toolbar moves.
Follow-ups you should expect
Interviewers use these to check whether the first answer was understanding or memorisation.
- 1What is the difference between vh, svh, lvh and dvh?
- 2Why can 100vw cause horizontal scrolling?
- 3When would you use vmin instead of vw?
- 4How do you make fluid type safe with viewport units?
Say it in the interview
Viewport units are percentages of the viewport. vw and vh are the basic ones, and vmin and vmax refer to the smaller and larger axis. On mobile, vh is unstable because the browser toolbar changes the visible height, so I use svh for a stable initial fill and dvh when I want to track the visible area. I clamp vw-based type so it never becomes too small or too large.
Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.
Related questions
Reading is step one
Now say it out loud.
Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live CSS mock interview and get scored feedback on depth, clarity and confidence.