In-depth understanding of the differences between px, rem, em, vh, vw

Absolute length

px

px is the pixel value, It is a fixed length, such as our meters and centimeters.

Relative length

Why do we need relative length rem em etc?

Fixed length can no longer meet our current needs.

For example: For example, when we shrink our screen, we not only need to reduce the width and height of our box, we also want to reduce the font size, 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, then 1rem = 16px

How to modify the relative calculation relationship between rem and px

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

code

<div class="div-rem">rem</div>

/* 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

em and Calculation relationship of px

The value of em is a multiple of px

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

How to modify the relative calculation of em and px Relationship

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

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

The difference between rem and em

The above is the detailed content of In-depth understanding of the differences between px, rem, em, vh, vw. For more information, please follow other related articles on the PHP Chinese website!