Viewport Units

Viewport units are CSS length units based on the size of the viewport. 1vw is 1 percent of the viewport width, 1vh is 1 percent of its height, and vmin and vmax use the smaller or larger of the two. Newer units (svh, lvh, dvh) account for mobile browser toolbars.

Why it matters

They make sizes scale with the window without media queries: a hero section filling the screen or text that grows with width. The classic problem is mobile browsers, where 100vh equals the largest viewport with the address bar hidden, so content can extend under the toolbar. 100dvh (dynamic viewport height) follows the toolbar as it shows and hides, svh is the smallest state and lvh the largest.

Example

.hero {
  min-height: 100vh;   /* fallback */
  min-height: 100dvh;  /* modern mobile-friendly */
}
h1 { font-size: clamp(1.75rem, 4vw + 1rem, 3.5rem); }

clamp() keeps the heading between a minimum and maximum while it scales with width.

Common mistakes

• Using only vw for font size, which ignores user zoom and font preferences; combine with rem.
• Setting 100vw on elements and getting a horizontal scrollbar, since it includes the scrollbar width.
• Using 100vh for mobile full-screen layouts.

Related

• Rem vs px
• Meta viewport tag
• Responsive design
• Media query

यह पेज सामान्य जानकारी है, जिसे हमारी संपादकीय टीम ने लिखा है और दस्तावेज़ीकरण बदलने पर अपडेट किया जाता है। सर्वर और प्रदाता अलग-अलग होते हैं, इसलिए बदलाव पहले सुरक्षित तरीके से जाँचें। देखें: संपादकीय नीति और अस्वीकरण.