Units in CSS

Today saw a unit VW has not seen, by the way the CSS I used to explain the unit;

1.px

PX: pixels, this unit presumably everyone is familiar with, is a computer on a point, I do not say anything more.

2.em

EM is the font size relative to its parent element, and if there is no parent element, it is relative to the body element, that is, 1em is 1 time times the size of the current element, and 2EM is twice times.

<div style= "Font-size:12" >

<p style= "Font-size:12" >12px size </p>

<p style= "font-size:1em" >1em size </p> ==> two P font size is the same

</div>

3.rem

REM is relative to the size of the root element, the HTML element, REM is generally used to do the adaptation of the mobile side, we can have two methods to use REM

1. In CSS, set the fong-size size of the HTML element to 625% and then the pixel size in the design, dividing by 100 is the value of REM;

<style>
html{
font-size:625%;
}
</style>

<div style= "FONT-SIZE:100;" >
<p style= "font-size:100px;" > Huge </p>
<p style= "FONT-SIZE:1REM;" > Huge </p>
</div>

2. Based on the size of the design diagram, the font-size of the root element is set by JS

Document.documentElement.style.fontSize = document.documentelement.clientwidth/6.4 + "px";

6.4 of them are based on the horizontal size of the design, if the design is based on Ipone7, that is divided by 7.5, after the pixel size of the design figure, divided by 100 is the value of REM.

4.vw

VW viewport width, is also used to do mobile side of the flexible layout of units, but basically not used, I also today only see this. The principle is that the device divides the viewport evenly into 100 units of VW

The visible area of the PC is 1280px, that 1VW is 12.8px, so in the mobile layout, according to the design width, if 750px, the pixel size will be achieved multiplied by 100 divided by 750, that is, directly divided by 7.5, the result is the value of the VW, the use of the same as REM

Units in CSS