css3.0 Front-end length unit px em rem VM VH VM PC PT in Do you really understand?

1: Nonsense not much to say, look directly like the table:

2:PX does not introduce too much, is the size of the pixel, add your screen resolution of 1920, then each of the equivalent of each has a transverse 1920 pixels;

3:em is a relative unit, generally defined in the body of the font-size as the benchmark, the default value of 1em = 16px, if we want to use "1em" = "10px" to replace the default value "1em" = "16px", should write the following code:

Body{font-size:62.5%;/*10÷16x100% = 62.5%*/}H1{font-size:2.4em;/*2.4emx10 = 24px*/}ul{font-size:125%;/*The benchmark becomes 20px*/}Li{font-size:1.4em;/*1.4x? = 14px?*/}

But the problem comes, because "em" is relative to the parent element, so adding UL does not define the base size, then the following Li will be the default value of "1em" = "16px", but this conversion unit can be very cumbersome, but each parent element you set the datum size, What do you do if you add endless code-editing headaches to the ground?

4: Combined with the above conditions, REM was born!!! The "font size of the root element" is described in this web site. That is, when html{font-size:62.5% is set, the root unit of this page is 10px, that is, any element whose 1rem is equal to "10px". Isn't it convenient.

5: Here are some advanced, VW VH VMS, in short, whether mobile or PC, the screen width is 100vw, screen height is 100vh, somewhat similar to 100%, but different from%, because the% units are relative to the parent, and both VW and VH are relative to the entire screen screen;

6: Whereas VMs are a complement to VW and VH, that is, when the screen width > screen is high, the "screen high" is the benchmark, i.e. 1VM = 1VH, when the screen height > screen width, with "screen width" as the benchmark, that is 1VM = 1VW; September 23, 2012 compatibility for this day is: Ch Rome 20+, ie9+ and Safari 6 support! The famous CSS Properties usability query site Caniuse gives a specific compatibility table, click here to view.

If you feel good, point a praise Ah!!!

css3.0 Front-end length unit px em rem VM VH VM PC PT in Do you really understand?