The thing in CSS (a)---units in CSS 2

In the previous blog mentioned%, px, em three units, the most complex is EM, because to calculate the current element within the font-size, you must know the parent element of the font-size, layer accumulation, error prone. Now the new unit REM has been introduced into the CSS3, which has changed the status quo.

Rem

REM, official saying: The root element of the font-size. The official said this very clearly, REM is relative to the root element of the HTML to calculate, the root of the current element of the immediate parent element is independent, as long as the HTML settings font-size, the default is 1rem=16px. Let's look at an example below:

 .container  {width :  80% ; height :  10em ; padding :  1em ; background-color :  #228F45 ; font-size :  1.5rem ;} .child  {width :  50% ; height :  5em ; background-color :  #D5DED8 ; padding :  0.8em ; font-size :  0.8rem ;} 

HTML under 1rem=16px,container under Font-size=1.5*16=24px,1em=24px,height=24*10=240px,child font-size=0.8*16=12.8px,1em= 12.8px,height=12.8*5=64px. Of course, IE8 and the lower version of IE is not support REM, so in consideration of compatibility, you can use PX to hack.

Other

Other units in, CM, MM, PT, PC are absolute units, these units in the web used relatively little, and PX conversion relationship as follows
1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px

Summarize

At present these units are widely used in the px,em,rem,%, now very popular bootstrap more use of EM, if not support IE8, you can consider using REM, figuring out the situation of these units, in favor of the layout of the picture preparation.

The thing in CSS (a)---units in CSS 2