Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

CSS3 relative units eplained

Friday, May 27th, 2016 by Servage

cssPixels, rems, ems, percentagess… If you are a designer, you must have used these in CSS before. What about vh, vw, vmin or vmax? This time we are going to talk about these four CSS3 units you might not have used before.

What are relative units?

To get an understanding of what the above units are, it is essential to understand the meaning of relative units. CSS has two types of units: absolute and relative units. Absolute units are, as the name suggests, absolute. Their size does not change based on anything else on the page. An example of this would be pixels. Relative units are the opposite: they change based on certain conditions. Relative units are based on things such as the font size of a parent container and the size of the browser window.

vh and vw

The vh and vw units stand for viewport height and viewport width. They are based on the dimensions of the actual browser window, which is also called the viewport. These units are similar to the percent unit found in CSS. One unit is equal to one percent of the viewport. For instance, width: 10vw means 10% of the viewport width. So what is the difference between these two units and percents, and when to use which? Percents are relative to the parent container. If the <body> is 1904px and you create a div with width: 100% inside it, the div will also be 1904px wide. However, if you use width: 100vw instead, it will be 100% of the viewport, which on a full HD display is 1920px provided that the browser window is maximized. Note that vh and vw include scrollbars in their sizes. This means if you have a 1920px viewport that has scrollbars on it, the viewport width is still 1920px. This is the opposite of how percentages work.

If you want to set the width of an element to cover the whole screen, it is recommended to use percentages because using vw would cause a scrollbar to appear. However, for defining heights of elements, it is sometimes a good idea to use the vh unit. This is particularly useful if you want to create an element that is 100% high. If you use vh for this, you do not need a parent container that is also 100% high like you would need if you used percentages for this.

vmin and vmax

These units build on top of the vh and vw units. Vmin takes the viewport height or width that is smaller than the other. One unit is equal to 1% of the smaller viewport dimension. For instance, 25vmin is equal to 25% of the smaller viewport dimension (height or width). vmax does the same but for the bigger viewport dimension.

The use cases for these relative units may be limited, but still usefull in certain situations.

CSS3 relative units eplained, 3.6 out of 5 based on 5 ratings
Categories: Tips & Tricks

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.