Guide: How to use CSS Viewport Units: Tips
Viewport percentage lengths, or viewport units as they are more commonly called, are responsive CSS units that allow you to define dimensions as a percentage of the width or length of the viewportViewport units can be very useful in cases where other responsive CSS units, such as percentages, are hard to make work although W3C’s documentation on viewport units contains everything that can be stopped in theory, it is not very comprehensive. So in this article we will look at how these CSS units work in practice
Viewport height (vh) & viewport width (vw)
W3C defines viewport as “size of the initial containing block”. In others words, viewport is the area in the browser window or any other viewing area on a screen. The vw and vh units represent the percentage of the width and height of the actual viewport. They can take on a value between 0 and 100 according to the following rules: 100vw = 100% of viewing window width 1vw = 1% of viewing window width 100vh = 100% of viewport height 1vh = 1% of viewport height So, how are viewport units different from percentage units? Percentage of units inherit the size of their parent while viewport units don’t. Viewport units are always calculated as the percentage of the viewport sizeAs a result, an element defined by viewport units can exceed the size of its parent. Full screen sections are probably the most well-known use cases of viewport units. The HTML is pretty simpleWe just three sections one below the other and we want each of them to do that cover the entire screen (but no more).
In the CSS we use 100vh as the height value and 100% as the width. We do not use the vw unit by default here, scroll bars are also added to the viewport size. So if we used the width: 100vw; rule one horizontal scroll bar would appear on the at the bottom of the browser window
- {margin: 0; padding: 0;} section {background-size: cover; background-position: center; width: 100%; height: 100vh;}. section-1 {background-image: url (‘https: / /assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img1.jpg’)))) ;`s.section-2 {background image : url (‘https: //assets.hongkiat. com / uploads / css-viewport-units-vw-vh-wmin-vmax / img2.jpg’);}. section-3 {background-image: url (‘https://assets.hongkiat.com/uploads/css -viewport-units-vw-vh-wmin-vmax / img3.jpg’);} On the gif demo below you can see that vh is a really responsive unit According to the W3C documents, the above mentioned horizontal scroll bar problem can be solved by adding the overflow: auto; line to the root element. This solution works only partially, however. The horizontal scroll bar does indeed disappear, but the width is still calculated based on the viewport width (including sidebar), so the elements will be a bit bigger than they should be. I would say I wouldn’t dare to use the VW unit size of elements in full screen for this reason. We don’t even need it, as the width: 100%; line works perfectly. With full screen layouts, the real challenge has always been how to set a correct height value and the vh unit provides a brilliant solution for that. If you are interested in other usage scenarios vw and vh Lullabot has a great article with a handful of practical examples (with Codepen demos), such as:
Fixed ratio cards. Keep an element shorter than the screen. Scale text. Break out of the container.
Opera.dev also has a short tutorial on how to use the VW unit in create responsive typography You can use viewport units not only for the width and height properties, but for any other. That is possible, for example set the size of fills and margins using the vw and vh units.
Viewport min (vmin) & viewport max (vmax)
With the units vmin and vmax you can access it size of the smaller or larger side of the viewport, according to the following rules: 100vmin = 100vw or 100vh, whichever is less 1vmin = 1vw or 1vh, whichever is less 100vmax = 100vw or 100vh, whichever is greater 1vmax = 1vw or 1vh, whichever is greater So in the case of one portrait orientation, 100vmin equals 100vw, as is the viewport horizontally smaller than verticallyFor the same reason, 100vmax equals 100vh. Likewise in the case of one landscape orientation, 100vmin equals 100vh, as is the viewport smaller vertical than horizontalAnd of course 100vmax equals 100vw here. The units vmin and vmax are much less known than vw and vh. However, they can be used excellently as replacement for orientation @ media queriesFor example, vmin and vmax can come in handy if you have elements that might look strange at different aspect ratios The new code has a great tutorial where they discuss How to keep the hero’s text legible on any screen using the vmin unit. Hero lyrics tend to look too small mobile and too big on large monitors Here’s the main idea of their solution: h1 {font-size: 20vmin; font-family: Avenir, sans-serif; font-weight: 900; text-align: center;} In the Codepen demo you can see how vmin solves the legibility problem of hero texts. Then go to the “Full page” view on Codepen resize your browser window both horizontally and vertically to see how the hero’s text changes. See the Pen vMin for Hero Text by Dudley Storey (@dudleystorey) on CodePen.
Browser support
As you can see from the CanIUse map below, browser support is relatively good for viewport units. However, keep in mind that some versions of IE and Edge do not support vmax. Also iOS 6 and 7 have a problem with the vh unit, which is fixed in iOS 8
How to use CSS Viewport Units: Tips: benefits
Faq
Final note
I hope you like the guide How to use CSS Viewport Units: Tips. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends. For our visitors: If you have any queries regards the How to use CSS Viewport Units: Tips, then please ask us through the comment section below or directly contact us. Education: This guide or tutorial is just for educational purposes. Misinformation: If you want to correct any misinformation about the guide “How to use CSS Viewport Units: Tips”, then kindly contact us. Want to add an alternate method: If anyone wants to add more methods to the guide How to use CSS Viewport Units: Tips, then kindly contact us. Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off). Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.
