REM and EM and px VH VW and% mobile end length Units

1.rem and EM, px

first of all, the EM and px relationship em refers to the font height of the browser default 1em=16px, so 0.75em=12px; we often see the font-size:65% of the root element written on the page, so that EM becomes 16px*62.5=10em; this is the font size that is displayed on the page is 10px;

So 12px=1.2em,10px=1em, which means you just need to divide your original PX value by 10, and then put EM in as the unit on the line,

Characteristics of EM

EM is a relative value he will change according to the size of the parent element

But if multiple elements are nested to calculate its size, it's a very frustrating thing.

In such a case, there was REM

The difference between REM is that it is relative to the base element, so it is not affected by its parent class

Conclusion: The cause of the front-end industry to do mobile end will generally default to REM or EM, because the root element can be controlled by JS (or with @media) to achieve a variety of resolution of the font size effect

1.VH, VW and%

VH VW is all called viewport height and viewport Width meaning windows

In many cases, they are overlapping, each with its advantages and disadvantages.

The unit is more appropriate when processing the width % . When handling height, the vh unit is better.

(PS: For example you need to locate a piece of text within a screen, if you use% it calculates the height of your entire DOM, and VH calculates the current height of the screen)

REM and EM and px VH VW and% mobile end length Units