CSS3 Unit: PX,EM,REM,VH ...

How much have you heard, little friends? We used in the front-end cutting diagram project has px,em,rem,vh,% other basic useless. Especially VH, especially useful.

With all the CSS units, it should be the most complete.

px: absolute Unit, page by exact pixel display

em: relative units, the reference point is the size of the parent's font, if you define the font-size by itself (the browser default font is 16PX), the entire page 1em is not a fixed value.

REM: relative unit, can be understood as "root em", relative to the root node HTML font size to calculate, CSS3 new attributes, chrome/firefox/ie9+ support.

VW:viewpoint width, window widths, 1VW equals 1% of the window width.

VH:viewpoint height, aperture, 1VH equals 1% of the window height.

vmin:the smaller of VW and VH.

Vmax:the larger of VW and VH.

%: Percent

In: Inch

CM: cm

MM: MM

Pt:point, about 1/72 inches

Pc:pica, about 6PT,1/6 inches

Ex: the height of the x of the font for the current effect, calculated as 0.5em without determining the x height (IE11 and below are not supported, Firefox/chrome/safari/opera/ios safari/android browser4.4+ Equal required attribute plus prefix)

CH: Based on the "0" character in the font used by the node, 0.5em (Ie10+,chrome31+,safair7.1+,opera26+,ios Safari 7.1+,android browser4.4+ support) is not found

CSS3 Unit: PX,EM,REM,VH ...