A brief analysis of the units px, rem and em in CSS

Absolute length

px

px is a pixel value, which is a fixed length, such as our meters and centimeters Same.

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

rem How to modify the relative calculation relationship with px

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

Code

<p class="p-rem">rem</p>
/* rem的用法 */
html{
    font-size:16px;  // 1rem = 16px
}
.p-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, then 1em = 16px

How to modify the relative calculation relationship between em and px

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

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

Recommended tutorial: "CSS Tutorial"

The above is the detailed content of A brief analysis of the units px, rem and em in CSS. For more information, please follow other related articles on the PHP Chinese website!