The Ultimate guide of all 24 CSS Viewport Units

Read Time:6 Minute, 0 Second

You’ve probably heard of the different units used in CSS, but you may not have understood them all — or at least one. This is where I come in. In this post I’ll explain all 24 CSS viewport units and their specific uses.

There are six different viewport units in CSS with three unique modifiers giving us 24 combinations. These viewport units can specify lengths as a proportion of the viewport size.

Main four viewport units

The central CSS viewport units are vw, vh, vmin, and vmax. Chances are you know these units as developers widely use them, so I will try to be as brief as possible when explaining them.

vw

vw stands for viewport width. It is a unit of measurement that refers to the width of the viewport, or the visible area of a web page. One vw is equal to 1% of the viewport width.

For example, if you have a div element with a width of 50vw, this means that the div will be 50% of the width of the viewport. If the viewport is 1000 pixels wide, the div will be 500 pixels wide.

Here’s an example of how you can use vw in CSS:

Enter fullscreen mode Exit fullscreen mode

vh

In addition to vw, you can also use vh, which stands for viewport height, to specify sizes based on the height of the viewport. One vh is equal to 1% of the viewport height.

For example:

Enter fullscreen mode Exit fullscreen mode

If your viewport height is 300px then this will set the height of the element with the class “my-div” to 30px.

vmin and vmax

vmin stands for viewport minimum and vmax stands for viewport maximum. These are units of measurement that refer to the smaller or larger dimension of the viewport, respectively.

One vmin is equal to 1% of the smaller dimension of the viewport (either the width or the height, whichever is smaller). One vmax is equal to 1% of the larger dimension of the viewport (either the width or the height, whichever is larger).

For example, if you have a div element with a width of 50vmin, this means that the div will be 50% of the smaller dimension of the viewport. If the viewport is 1000 pixels wide and 600 pixels tall, the div will be 300 pixels wide (50% of the smaller dimension, which is the height).

Here’s an example of how you can use vmin in CSS:

Enter fullscreen mode Exit fullscreen mode

Similarly, you can use vmax to specify sizes based on the larger dimension of the viewport.

For example:

Enter fullscreen mode Exit fullscreen mode

This will set the width of the element with the class “my-div” to 75% of the larger dimension of the viewport.

Two New Viewport Units in CSS

Apart from the above four units, CSS now defines two other viewport units: vi and vb. The main reason for this change is to make adopting different writing directions in the code easier. For example, your entire application changes direction from horizontal to vertical writing orientation. In that case, the idea of ​​top/bottom or width/height doesn’t necessarily mean the same. Because if you want to add padding top and bottom of your text, This will be seen as left and right padding in vertical writing systems rather than top and bottom padding. That’s the reason CSS added vi and vb viewport units.

vi

vi stands for Viewport Inline, 1% of the viewport’s size in the inline direction. vi represents the inline direction of your document. A horizontal writing direction corresponds with the width of your viewport, and a vertical writing direction represents the height of your viewport. The easy way to remember the approach is that it is in the same direction as your text.

Here is an example:

Enter fullscreen mode Exit fullscreen mode

vb

vb is the opposite of vi and stands for Viewport Block, 1% of the viewport’s size in the block direction. In a horizontal writing direction, vi will correspond with the viewport height, and in a vertical document, this will represent the width of your viewport. An easy to remember this unit is to remember that the block direction will always be the direction block elements (two divs) stack on top of one another.

Here is an example:

Enter fullscreen mode Exit fullscreen mode

Viewport Unit Modifiers

Till now, I have explained the six main types of viewport units, but you can add three different modifiers to these units to make them behave differently when your viewport is resizable.

These modifiers are s, l, and d. To use a modifier, you have to put the modifier after the number and before the unit, eg 10svw, giving us a total of four combinations for each of the six viewport units. vh, svh, lvh, and dvh.

If you don’t use a unit modifier, such as 10vw or 10vh, the browser automatically defaults to one of the three modifiers depending on the browser implementation.

s modifier

The s modifier stands for Small and represents the smallest possible viewport. For example, when you browse the web on your phone, you may notice that the header part, where the URL and menu option lies, disappears when you scroll down. This happens because your viewport technically changed size since the header is no longer taking up part of your viewport.
For example, setting an element to 100svh would take up 100% of the screen’s height based on the screen’s size when the header is shown. It does not matter if the header is visible or not. This unit will always base its size on what the viewport would be if the header is showing.

l modifier

The l modifier stands for Large and represents the largest possible viewport. You can think of l modifier as the opposite of the s modifier. In our mobile phone example this would be the size of the viewport when the header is NOT shown. For example, setting an element to 100lvh would take up 100% of the screen’s height based on the screen’s size when the header is not shown.

d modifier

The d modifier stands for Dynamic and represents the current viewport size, precisely like a mixer of the s and l modifiers. In our mobile phone example, this would always be the size of the current viewport, no matter if the header is showing or not. If our URL bar is showing, then the d modifier is the same size as the s modifier, and if the header is NOT showing, the d modifier is the same size as the l modifier.


Conclusion

You might find these 24 units confusing and a lot, but it is just six units with three relatively simple modifiers. And most of the time, you will always use the first four units that I have explained(vw, vh, vmin, vmax). And the rest of the units are still in the draft stage, which means they still need to be officially.

Source: https://dev.to/arafat4693/the-ultimate-guide-of-all-24-css-viewport-units-3dhk

CyberSEO Pro - OpenAI GPT-3 autoblogging and content curation plugin for WordPress

Tag Cloud

Java Java Logical Programs OTP Generation in Java python Recursion youtube video ASCII Upper and Lower Case blockchain javascript graph learn to code software development Successful Software Engineers breadth first search Java Array Programs Java Programs Uncategorized android ios programming kotlin web-development django data sql cybersecurity database swiftui serverless aws swift rust react background-position gradients loader mask grid nth-child pseudo elements indieweb WordPress Print Array without brackets C++ factorial Java String Programs Final Keyword Static Variable Axie Infinity Cryptokitties NFT games tool inserting MISC Tips Codes python code python projects python3 system info python project Bigginers How to Do Integrations Payment Gateways PHP checkout page in php Implement stripe payment gateway in Step by step in PHP integrate stripe gatway in php mysql payment gateway integration in php step by step payment gateway integration in php step by step with source code payment gateway integration in website PHP Integrate Stripe Payment Gateway Tutorial PHP shopping cart checkout code shopping cart in php stripe php checkout PHP/MySQL/JSON best international payment gateway does google pay accept international payments how to accept international payments in india paytm payment gateway razorpay codeigniter github razorpay custom checkout github razorpay get payment details razorpay integration in codeigniter github razorpay international payments Razorpay payment gateway integration in CodeIgniter razorpay payment gateway integration in php code Razorpay payment gateway integration with PHP and CodeIgniter Razorpay payment gateway setup in CodeIgniter Library & Frameworks Tips & Tricks UI/UX & Front-end coding birds online html code for google sign in login with google account in PHP login with google account using javascript login with google account using javascript codeigniter login with google account using php login with google account using php source code
Reactivity in Javascript Previous post Reactivity in Javascript
Pandas Get Index Values Next post Pandas Get Index Values

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.