Viewport Units allow to size elements and font sizes as a percentage of the total width or height of the user’s screen (the viewport). Have you used them before? Let’s clarify what do you know about CSS Viewport Units.
The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly. However, when the value of overflow on the root element is auto, any scrollbars are assumed not to exist. Note that the initial containing block’s size is affected by the presence of scrollbars on the viewport.
- vw unit
Equal to 1% of the width of the initial containing block.
- vh unit
Equal to 1% of the height of the initial containing block.
- vmin unit
Equal to the smaller of vw or vh.
- vmax unit
Equal to the larger of vw or vh.
Viewport Units are always a percentage of the total size of the viewport, while a percentage value applied on an element is a percentage of the element’s parent, not necessarily the whole viewport. With vmin, we size as a percentage of the smallest between the width or the height of the viewport, and with vmax, we size as a percentage of the largest between the two. vmin and vmax can be useful to size title font sizes.
Viewport Units are also great for large elements like hero sections, but they can also be used to size elements like titles and have their font size adjust automatically as a function of the viewport size. This way, we can potentially avoid having to set multiple breakpoints with set font sizes, which can simplify our style rules.
Read more about CSS Viewport Units and find the use cases here.
Explore the other useful content about < css-doodle /> for drawing patterns with CSS!