The REM,EM,VH,VW in CSS is clear once.

As for the length units in CSS, we use the PX at most, because he is straightforward. But when a scheme matches a different terminal, the PX will appear too stiff and not easily adaptable.

However, REM,EM,VH,VW can effectively solve this problem. Let's take a look at what these things are.

The first is the REM,W3C official website description is "font size of the root element", i.e. REM is relative to the root elements. The concept is not good to understand that we directly see the demo:

The DOM structure is as follows:

The CSS code is as follows:

The effect is as follows:

　　

now for REM Whether there is a point of understanding, set the size of the HTML font-size, there is a reference value, the other place PX can be replaced REM, as shown in the demo of the HTML font-size size of 16px,div font capitalization is 1rem , 1.5rem,2rem. The conversion into PX is divided into 1* 16=16px,1.5*16=24px,2*16=32px respectively . Not only the font size, but also the width and height of all HTML elements can be written in rem, as well as the font-size value of the reference HTML. To extend it again means that all of the documents that can be represented by PX can be replaced by REM.

So what is the point of doing this? When you need to make the appropriate layout, REM can play its true power. By matching different sets of screen sizes, setting the value of its HTML font-size, you can confidently use REM, and the rest can be handed over to the browser.

The EM,VH,VW principle is similar. The difference is that the reference point is not the same, the font-size size of the parent node of the EM reference, that is, when the parent node fong-size is 12px, the child node is set to a width of 10em,font-size 2em, then the width is converted to PX is 12*10=120px, the font size is 12* 2=24PX, if the height of the Sun node set 10em, then convert to PX is how much? Of course is the parent node Fong-size value 24px by 10em, the result is 240px, so em always only care about the upper level of font-size. Then the question came, the previous level did not set font-size how to do? Don't panic, the font-size of the element inherits the Font-size value of the parent node by default. This is not the right to be clear on the chest.

Next is VH and VW. You may not see anything by looking at shorthand. We unfold to see Vh:viewport height,vw:viewport width. Viewport is called the viewable area. This is not to feel the understanding of VH and VW. Yes, that's what you think. VH and VW refer to the height and width of the viewable area, respectively.

So these units are relative, as long as you know the reference point, then it is very simple. At present I do the project, are unified use of REM to do the adaptation, convenient and effective, who use who know!

As a newcomer, Huan drinks everyone to guide criticism.

The REM,EM,VH,VW in CSS is clear once.