Px,em,rem

PX: pixels are relative length units relative to the display screen resolution. PC side use PX Pour also does not matter, but in the mobile side, because the mobile phone resolution kind of a lot of, impossible to fit each other, at this time PX appears very weak, so must consider EM and REM.

EM: Inherit the parent, assuming that the HTML font-size default to 16px,body font size is defined as 50%, then the font size in the body is 1em=8px. But when you define a div, and then set the font to 50%, ask, now div 1em equals how much? Because inherited the value of the parent, now this div in the 1em=4px, so nested down, I'm sorry, I'm not good at maths! All REM appeared.

REM: is an upgrade of EM, REM will only be relative to the value of HTML, will not be affected by the parent, the advantage is: From the EM example, 1rem will always be equal to 8px. It is not necessary to recalculate the size of REM at this time. REM because it is CSS3 increase, so IE8 or below please ignore (always want to not understand, why people so far to Microsoft have abandoned IE so reluctant).

The above is also to clarify the difference between them and the relationship between the REM more used in mobile H5 page adaptation use.

Px,em,rem