A brief analysis of the differences between px, rem, em, vh, and vw in CSS

Absolute length

px

px is the pixel value, which is a fixed length, like our meters and centimeters.

Relative length

Why do we need relative lengths like rem em etc?

Fixed length can no longer meet our current needs.

For example: When we reduce the size of our screen, we not only need to reduce the width and height of our box, but we also want to reduce the font size as well, so that the user experience will be better.

rem

The calculation relationship between rem and px

The value of rem is a multiple of px

By default, font-size = 16px, so 1rem = 16px

How to modify the relative calculation relationship between rem and px

We can and can only modify font-size: 32px in the html tag (because the html node is the root node, which is the r:root in rem), so 1rem = 32px

Code

<div class="div-rem">rem</div>
/* Usage of rem */
html{
    font-size:16px; // 1rem = 16px
}
.div-rem{
    width: 10rem; // 10rem = 10 x 16 = 160px
    height: 10rem; // 10rem = 10 x 16 = 160px
    font-size: 1rem; // 1rem = 16px
    background-color: #a58778;
}

em

The calculation relationship between em and px

The value of em is a multiple of px

By default, font-size = 16px, so 1em = 16px

How to modify the relative calculation relationship between em and px

We can modify the font-size on our element: 32px, so 1em = 32px

If the font-size is not set on our element, we can also set the font-size on the parent element to affect the em value used by our element (child element).

The difference between rem and em

Summarize

This is the end of this article about the differences between the units px, rem, em, vh, vw in CSS. For more information about the differences between px, rem, em, vh, vw, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!