Search code examples
htmlcssresponsive-designviewportviewport-units

Official Docs of Viewport Width/Height being bad practice in CSS?

Using the vw and vh measurements in CSS seems pretty useful sometimes to make Responsive Webpages

However, I see and I have personally used it in places where it would be VERY unusual to use.

I have heard from others that there is "official documentation" stating that VW and VH can be bad practice in any manner, I want to know if that is true or not.

Some Examples of how it could be unusual or bad practice (the bottom one):

/* Background */
.backgroundDiv {
 width: 100vw;
 height: 100vh;
}

/* a Top Bar */
.divHeader {
 width: 100vw;
 height: 10vh;
}
Solution

  • vw and vh are standard units and should work like any other unit. Even if they are used unusually, as long as they are used validly, it is fine to use them like all other units. vw and vh do have some issues and cross browser problems like other parts of CSS and they can be checked here. However, viewport units are standardised and it is as safe to use them as it is to use any other units.

    In your code above, I would advise not setting the height of .divHeader using the viewport height; it would be better to set the size of its children elements instead and let them dynamically set the height of the .divHeader. vw and vh are useful when making responsive websites, but there are cases where using percentages or just relying on margins and paddings to dynamically structure your elements for you is better.

    Just because vw and vh can be used does not mean it is always a good idea to use them. They can actually restrict how responsive your website is and it is best to let child elements structure the parent element instead wherever possible to ensure full responsiveness.