Computer scienceFrontendCSSMeasurement units

Relative units

Provided by: JetBrains Academy
10 minutes read

At this point, you are probably comfortable working with pixels, but CSS supports many other units of measurement, for example, percentages. Any of these units could be used depending on your goals and preferences. In CSS, it is common to distinguish two major types of units: relative and absolute. Relative units of measurement describe property values that directly depend on the values of the same properties for the parent element. This is what we are going to talk about in this topic.

Relative units

Let's take a look at several relative units of measurement and see where they differ.

  • % sets the measurement as a percentage of the parent element. This is especially convenient when you need to make a page that adjusts to the size of the screen where it is viewed. In CSS, percentages are calculated from the size of the desired parent element property. With the help of percentages, it is convenient to set the size of block elements. In the example below, the height of the <p> element will be 200 pixels because it is exactly 50% of the height of the parent element <div>:

<div>
  <p>Units of measure</p>
</div>
div {
  height: 400px;
}

p {
  height: 50%; /* 200px */
}

Suppose the width of the HTML element is set to X% then its width can be calculated as: (X/100) * Width of Parent element

  • em is used to indicate the font size relative to the current font of the parent element. If the font size is 4.5em, it means that it is 4.5 times larger than the current font of the parent element:

<p><b>Units</b> of measure</p>
p {
  font-size: 10px;
}

b {
  font-size: 2em; /* 20px */
}

  • rem resembles em, but with one important difference: rem is used if you want to change the font size of the element in relation to the font size of the root element <html>:

html {
  font-size: 10px;
}

p {
  font-size: 15px;
}

b {
  font-size: 2rem; /* 20px */
}

Note that the text font size in the <b> tag will be 20 pixels, even though the styles are applied to the <p> tag.

Be careful: em is based on the font size of the parent element, while rem depends on the <html> element. Do not confuse the two! The <html> itself is also parent to some other elements, which can cause some confusion.

So, how do you set the font size with %, em, and rem if the original font size of the <html> element is not set? In browsers, the font size is set to 16px by default. You can use this value in your calculations. In such cases, 16px is equal to 100%, 1em, or 1rem.

Viewport units

There are also relative units of measurement that depend on the viewport. The word "viewport" refers to the area of the web page that the user can see without having to scroll. Such units begin with the letter "v", which stands for "viewport". As you may have guessed, such units of measurement are used to ensure that the web page is correctly displayed on devices with different screen sizes.

  • 100vw means 100% of the width of the viewport/view window

  • 100vh means 100% of the height of the viewport/view window.

Schematic width and height of the viewport

100vw and 100vh are the values of the whole window together with the scroll bar. When you try to set this value, the elements will see a horizontal/vertical scroll bar.

  • vmin — 1% of a smaller dimension of the viewport. vmin uses the size of the smaller side. For example, if the height of the browser window is less than the width, 1vmin will be equal to 1vh. If the browser's width is less than its height, 1vmin equals 1vw. 100vmin means the element changes are relative to 100% of the smaller dimension of the viewport (i.e 100% of the minimum of view height and view width).

Representation of minimal side of the mobile viewport

  • vmax — 1% of a larger dimension of the viewport area. This unit of measurement is the direct opposite of vmin and uses the larger side. For example, if the width of the browser is greater than its height, 1vmax is 1vw. If the height of the browser is greater than its width, 1vmax equals 1vh. 100vmax means the element changes are relative to 100% of the larger dimension of the viewport (i.e 100% of the maximum of the view height and the view width).

The max side of the mobile viewport

The viewport-dependent measuring units, like %, are suitable for dimensioning block elements:

pre {
  width: 10vw;
  height: 24vh;
}

div {
  width: 20vmin;
  height: 40vmax;
}

Now, let's take another example to understand the vmin and vmax.

<body>
  <div class="minmax">This is an example for vmin and vmax</div>
</body>
.minmax {
  text-align: center;
  height: 80vmax;
  width: 60vmin;
  background-color: lightcoral;
  font-size: 2rem;
}

The red rectangle with the black text in a viewport

As shown in the above output image, the height of the element is 80% of the maximum of vh and vw (here the maximum is vw) and the width of the element is 60% of the minimum of vh and vw (here the smaller one is vh).

  • ex allows you to set the font size relative to the x-height of the current font of the parent element. The term "x-height" implies the height of lower case letters. This unit is rarely used.

Here is an example of its use:

p {
  font-size: 4ex;
}

  • ch is used to set the font size relative to the width of the character "0" in the current font of the parent element. This unit of measurement is especially good for printing. For example, if you are making a magazine, you might need to limit the sheet size to the number of characters. In mono-width fonts (fixed-width fonts), where all characters have the same width, 1ch is equal to one character. In such cases ch might be especially useful. In proportional fonts (with variable width), any given character may be wider or narrower than the "0" character.

Here is an example:

p {
  font-size: 5ch;
}

Specifying unit values

Unit values can be specified as integers (5vh, 27%, 5vw) or decimals (5.6em, 1.2rem, 25.5%). If zero is used as a value, the indication of the unit of measurement can be omitted. The browser will understand the lines font-size: 0%; and font-size: 0; equally well. If a decimal begins with 0, then 0 before the point can be omitted: .9em, .5rem.

Some properties in CSS allow you to specify negative values: -35.5%. We will learn about them later on. When specifying negative values, make sure they are acceptable for your properties. Otherwise, the browser will ignore the code line containing the error.

Conclusion

Understanding and effectively using CSS units such as percentages, em, rem, vw, vh, vmin, vmax, ex, and ch is crucial for creating responsive and visually appealing web designs. These units provide flexibility and control over how elements size and scale across different devices and display settings. By mastering the differences and applications of these relative and viewport-dependent units, you can enhance user experience and ensure your web pages are accessible and consistent no matter where or how they are viewed.

715 learners liked this piece of theory. 48 didn't like it. What about you?
Report a typo