On this article, we’ll look intimately at 4 useful size items which might be relative to the browser viewport: vh, vw, vmin and vmax. These are actually “responsive size items” within the sense that their worth adjustments each time the browser resizes, and so they introduce extremely helpful choices for sizing parts in CSS.

The browser’s viewport is that space of the browser during which web site content material is displayed. The flexibility to measure that space could be very helpful, because it makes as soon as troublesome duties straightforward — reminiscent of setting a component’s top to that of the browser window.

Desk of Contents

The Items and Their That means

Let’s first have a look at what these items imply.

  • vh stands for viewport top. This unit is predicated on the top of the viewport. A price of 1vh is the same as 1% of the viewport top. A price of 100vh is the same as 100% of the viewport top.
  • 1vw stands for viewport width. This unit is predicated on the width of the viewport. A price of 1vw is the same as 1% of the viewport width.
  • vmin stands for viewport minimal. This unit is predicated on the smaller dimension of the viewport. If the viewport top is smaller than the width, the worth of 1vmin might be equal to 1% of the viewport top. Equally, if the viewport width is smaller than the peak, the worth of 1vmin might be equal to 1% of the viewport width.
  • vmax stands for viewport most. This unit is predicated on the bigger dimension of the viewport. If the viewport top is bigger than the width, the worth of 1vmax might be equal to 1% of viewport top. Equally, if the viewport width is bigger than the peak, the worth of 1vmax might be equal to 1% of the viewport width.

Some instance values

Let’s see what the worth of those items might be in numerous conditions:

  • If the viewport is 1200px large and 1000px excessive, the worth of 10vw might be 120px and the worth of 10vh might be 100px. For the reason that width of the viewport is bigger than its top, the worth of 10vmax might be 120px and the worth of 10vmin might be 100px.
  • If the system is now rotated in order that the viewport turns into 1000px large and 1200px excessive, the worth of 10vh might be 120px and the worth of 10vw might be 100px. Curiously, the worth of 10vmax will nonetheless be 120px, as a result of it would now be decided based mostly on the peak of the viewport. Equally, the worth of 10vmin will nonetheless be 100px.
  • If you happen to resize the browser window in order that the viewport turns into 1000px large and 800px excessive, the worth of 10vh will turn out to be 80px and the worth of 10vw will turn out to be 100px. Equally, the worth of 10vmax will turn out to be 100px and the worth of 10vmin will turn out to be 80px.

At this level, viewport items could sound just like percentages. Nevertheless, they’re very totally different. Within the case of percentages, the width or top of the kid factor is decided with respect to its dad or mum. Right here’s an instance:

As you may see, the width of the primary youngster factor is ready to be equal to 80% of its dad or mum’s width. Nevertheless, the second youngster factor has a width of 80vw, which makes it wider than its dad or mum.

Functions of vh, vw, vmin, and vmax

Since these items are based mostly on viewport dimensions, it’s very handy to make use of them in conditions the place the width, top or measurement of parts must be set relative to the viewport.

Fullscreen background photographs or sections with viewport items

It’s quite common to set background photographs on parts that totally cowl the display. Equally, you could need to design an internet site the place every particular person part a few services or products has to cowl your entire display. In such circumstances, you may set the width of the respective parts to be equal to 100% and set their top equal to 100vh.

For instance, take the next HTML:

<div class="fullscreen a">

You may obtain a fullwidth background picture part utilizing the CSS beneath:

.fullscreen {
  width: 100%;
  top: 100vh;
  padding: 40vh;

.a {
  background: url('path/to/picture.jpg') middle/cowl;

Each the first and second picture are taken from Pixabay.

Creating completely becoming headlines with viewport items

The FitText jQuery plugin can be utilized to scale headlines in such a manner that they take up all of the width of the dad or mum factor. As we talked about earlier, the worth of viewport items adjustments immediately based mostly on the scale of the viewport. Which means that, in the event you use viewport items to set the font-size to your headings, they’ll match completely on the display. Each time the viewport width adjustments, the browser will even robotically scale the headline textual content appropriately. The one factor that you could do is determine the best preliminary worth for the font-size when it comes to viewport items.

One main downside with setting font-size this fashion is that the measurement of the textual content will differ significantly relying on the viewport. For instance, a font-size of 8vw will compute to about 96px for a viewport width of 1200px, 33px for a viewport width of 400px and 154px for a viewport width of 1920px. This may make the font both too giant or too small for it to be correctly readable. You may learn extra about correctly sizing the textual content utilizing a mixture of items together with the the calc() function on this glorious article about viewport unit-based typography, and you’ll examine using the clamp() function to realize an analogous outcome.

Centering parts with viewport items

Viewport items might be very useful whenever you need to put a component precisely on the middle of your person’s display. If you already know the factor’s top, you simply must set the highest and backside worth of the margin property to be equal to [(100 - height)/2]vh:

.centered {
  width: 60vw;
  top: 70vh;
  margin: 15vh auto;

Nevertheless, these days we are able to use Flexbox or CSS Grid to middle parts, each vertically and horizontally.

Issues to Maintain in Thoughts with Viewport Items

If you happen to resolve to make use of viewport items in your initiatives, there are some things you need to bear in mind.

Watch out when setting the width of a component utilizing viewport items. It’s because, when the overflow property on the basis factor is ready to auto, browsers will assume that the scrollbars don’t exist. This may make the weather barely wider than you anticipate them to be. Take into account markup with 4 div parts styled as follows:

div {
  top: 50vh;
  width: 50vw;
  float: left;

Usually, you’d anticipate every <div> to occupy 1 / 4 of the obtainable display. Nevertheless, the width of every div is computed with the belief that there is no such thing as a scrollbar. This makes the div parts barely wider than the required width for them to look aspect by aspect.

Altering the width of the divs from 50vw to 50% will resolve this downside. The conclusion is that you need to use percentages when setting width for block parts in order that the scrollbars don’t intervene with the computation of their width.

An identical problem may also happen on cellular units due to the handle bar, which can seem or disappear relying on whether or not the person is scrolling or not. This may change the viewport top and the person will discover sudden jumps when viewing the content material.

To assist with this example, some new viewport items have been added to CSS, reminiscent of svw, svh, lvw, lvh, dvw, and dvh. You may examine them in our complete article on CSS sizing units.


On this article, we’ve briefly coated the that means and functions of the vh, vw, vmin and vmax viewport items. If you happen to’d prefer to take your information of viewport items and different CSS size items ti the following degree, take a look at An Overview of CSS Sizing Units.

You can even take your entire CSS expertise to the following degree with our e book CSS Master, 3rd Edition by Tiffany B. Brown – protecting CSS animations, transitions, transformations and far more.

FAQs About CSS Viewport Items

We’ll finish by answering a number of the most continuously requested questions on CSS viewport items.

What’s the vh unit in CSS?

The vh unit in CSS measure the “viewport top”. The viewport is the world of the browser during which an internet site is displayed. The vh unit permits you to simply measure the peak of the viewport and measurement parts in relation to this seen space. for instance, it’s tremendous straightforward to set a component to 100vh, that means that it will likely be precisely as tall because the browser window.

How do viewport items work?

Viewport items are based mostly on a proportion of the viewport’s dimensions. For instance, 1vw is the same as 1% of the viewport’s width, and 1vh is the same as 1% of the viewport’s top.

When ought to I exploit viewport items?

Viewport items are helpful for creating responsive layouts and parts that adapt to the scale of the viewport. They’re usually used for fonts, spacing, and sizing parts in a manner that ensures they give the impression of being good on varied display sizes.

How can I set viewport top in CSS?

To set viewport top in CSS, use the vh unit. In your CSS stylesheet, goal your factor, reminiscent of a <div>, with the top property, like so:

What are some frequent use circumstances for viewport items?

Viewport items are generally used for setting font sizes, creating responsive layouts, designing hero sections, and guaranteeing that parts like buttons and containers adapt properly to totally different display sizes.

What’s the distinction between 100vh and 100%?

In CSS, each 100vh and 100% are items of measurement used for specifying the scale or dimensions of parts, however they’ve totally different meanings and functions.

100vh represents the total top of the viewport, whatever the content material on the web page. Once you use 100vh for a component’s top, it would take up your entire vertical top of the person’s display, and it gained’t be affected by the content material or different parts on the web page.

100% is a relative unit of measurement. Once you use 100% for a component’s dimensions, it means it would occupy 100% of the obtainable house inside its dad or mum container. This can be utilized for each width and top, and it permits for extra versatile and responsive layouts because it adapts to the scale of the container.

The benefit of vh is that it may be measured and not using a dimension being set on the dad or mum factor. Setting a component to top: 100% gained’t have an impact except the dad or mum factor additionally has a top set.

How do I set a font measurement utilizing viewport items?

To set a font measurement utilizing viewport items, you should use the vw unit. For instance, font-size: 5vw; will set the font measurement to five% of the viewport width. However watch out with this, as fonts can turn out to be too giant or too small on some screens. To protect towards this, you should use the CSS calc() perform (for instance, font-size: calc(112.5% + 0.25vw);) or through the use of the CSS clamp() perform (for instance, font-size: clamp(2em, 8dvw, 12.5rem);).

What can I exploit as a substitute of 100vh?

It’s not all the time perfect to set a hard and fast top on a component. It’s usually higher to set this top as a minimal worth: min-height: 100vh. Whereas 100vh is a really useful means for setting a component’s top to the peak of the viewport, there are options.

You need to use 100% top relative to the dad or mum factor’s top as a substitute of the viewport top. This works properly in case your factor is contained inside one other factor with an outlined top.

You need to use CSS Flexbox or Grid structure to create versatile and responsive layouts with out counting on particular top values. These structure methods help you management the distribution of house amongst youngster parts.

In some circumstances, you could want to make use of JavaScript to calculate and set the peak dynamically based mostly in your necessities, such because the content material contained in the factor:

const factor = doc.querySelector('.factor');
const dad or mum = factor.parentElement;
factor.model.top = dad or mum.clientHeight + 'px';

How is viewport width calculated?

Viewport width (vw) is a relative unit of measurement utilized in CSS to outline sizes and layouts on net pages. It represents a proportion of the width of the viewport or the seen space of the online browser.

The calculation for viewport width is easy:

  • The viewport width unit is denoted as vw
  • 1vw is the same as 1% of the width of the viewport

For instance, if the width of the viewport (the browser window) is 1000px, then 1vw can be equal to 10px.

Viewport width items are useful for creating responsive net designs as a result of they scale with the scale of the viewport. Because the person resizes their browser window, parts laid out in vw items will modify their measurement proportionally. This makes it simpler to create designs that look good on each giant desktop screens and smaller cellular units.

Can I exploit viewport items together with different items?

Sure, you may mix viewport items with different CSS items. For instance, you should use vw for font measurement and px for padding or margins to realize a responsive design.

Are viewport items supported in all browsers?

Viewport items are well-supported in trendy browsers, together with Chrome, Firefox, Safari, and Edge. Nevertheless, it’s important to check your designs throughout totally different browsers to make sure constant conduct. You may examine assist for viewport items on the caniuse website, together with details about varied (minor) bugs in sure browsers.