How to use CSS Viewport Units: Tips

Full screen sections

Hello friends today we gonna learn about How to use CSS Viewport Units: Tips. So read this article, How to use CSS Viewport Units: Tips step by step so you may understand it in a better way. If you have query related to same article you may contact us. So Lets begin:

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

back to menu ↑

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

Differences in percentage units

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.

Example: Full screen sections

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.

Other usage scenarios

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.

back to menu ↑

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.

Example: make hero texts readable on any screen

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 you can 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.

back to menu ↑

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

Browser support for viewport units

back to menu ↑

How to use CSS Viewport Units: Tips: benefits

  • The How to use CSS Viewport Units: Tips tutorial is free .
  • This guide already helps so many users follow up with interest in a timely manner.
  • The price of the How to use CSS Viewport Units: Tips guide is free.

back to menu ↑

Faq

Tutorial summary of How to use CSS Viewport Units: Tips

In this guide, we told you about the How to use CSS Viewport Units: Tips; please read all steps so that you understand How to use CSS Viewport Units: Tips in case if you need any assistance from us, then contact us.

How this tutorial helping you?

So in this guide, we discuss the How to use CSS Viewport Units: Tips, which undoubtedly helps you.

What is actual time in which this method complete?

The time to complete the How to use CSS Viewport Units: Tips tutorial is 10+ minutes.

What are the supported Device?

PC Laptop or Desktop


back to menu ↑

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.

Compsmag
Logo
Shopping cart