The length of the absolute

px

Px is a pixel value, and it’s a fixed length, like our meter, like our centimeter.

Relative length

Why do we need relative length, REM, EM, etc.? 🤔

Fixed length is no longer enough for our current needs.

🌰 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 is better.

rem

The computational relationship between REM and PX

Rem is a multiple of PX

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

How does REM modify the relative calculation relation with PX

We can change font size: 32px to 1rem = 32px, and only in the HTML tag (because the HTML node is the root node, which is r: root in REM)

code

<div class="div-rem">rem</div>
Copy the code
/* 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;
}
Copy the code

em

Calculation relation between EM and PX

Em is a multiple of PX

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

How can EM change the relative calculation relationship with PX

We can change font size: 32px on our element so that 1em = 32px

If you do not set font size on your own element, you can also set font size on the parent element to affect the em value used by your own element (child element).

The difference between REM and EM 🤔

This is the difference between REM and EM:

Rem can only set the value of rem dependencies in HTML tags

Em allows you to set em dependent values on your own element and on the parent element

code

<! --em1--> <div class="div-em">em</div> <! --em2--> <div class="div-em-father">
    <div class="div-em-child">em child</div>
</div>
Copy the code
*/. Div-em {font-size: 32px; // 1em = 32px width: 10em; // 10em = 10 x 32 = 320px height: 10em; // 10em = 10 x 32 = 320px background-color: aquamarine; */. Div-em-father {font size: 64px;} /* em-father{font: 64px; // 1em = 64px } .div-em-child{ width: 10em; // 10em = 10 x 64 = 640px height: 10em; // 10em = 10 x 64 = 640px background-color: cadetblue; }Copy the code

vh vw

Vh and VW are divided into 100 equal parts according to the width and height of the window. 100Vh means full height, and 50vh means half height.

So what’s the difference between vH and VW and percentage? 🤔

The percentage is based on the setting of the parent element. If the parent element is 100px, then the child element is 100px.

Vh and VW are always window width and height.

code

<! --vh vw--> <div class="div-vh-vw"> <! -- %--> <div class="div-vh-vw-child"></div>
    
</div>
Copy the code
/* vh vw */. Div-vh-vw {width: 10vw; // height: 10vh; // Background-color: pink; } /* % % */.div-vh-vw-child{width: 50%; height: 50%; background-color: aliceblue; }Copy the code

Finally look at the display results (REM and EM code)