The difference between Px,em and REM in CSS

The difference between Px,em and REM in CSS

Today, suddenly found a particularly interesting problem, is inadvertently seen in a website of the EM is not 16px, the following expanded for PX and EM and REM exploration.

First, PX is an absolute length unit, relative to the display screen resolution, while EM and REM are relative length units relative to the font size of the text within the current object. If the font size of the current inline text is not artificially set, the default font size is relative to the browser. In the domestic, most of the site is unable to adjust, most of them are using PX to do units, foreign sites mostly with EM or REM as a unit font, their website font is easy to regulate.

Then for the individual px, EM, rem We talk about their different characteristics:

PX Features: PX is a typical unit of measure with a fixed value
EM characteristics: The value of EM is not fixed; EM inherits the font size of the parent element.
REM Features: REM is a new relative unit of CSS3 (root em, root em), and this unit has aroused widespread concern. What is the difference between this unit and EM? The difference is that when you use REM to set the font size for an element, it is still relative size, but relative to the HTML root element. This unit is a combination of relative size and absolute size of the advantages in one, through it can only modify the root elements in proportion to adjust all font size, but also to avoid the size of the font-layer composite chain reaction. Currently, in addition to IE8 and earlier versions, all browsers support REM. For browsers that do not support it, the workaround is simple enough to write an absolute unit statement. These browsers ignore font sizes that are set with REM.
So the question is, how do they translate between them? Here are a few common ways to convert:

PX to EM
example:12px/16px =. 75em
PX to%
EXAMPLE:12PX/16PX * 100 = 75%
PX to PT
EXAMPLE:16PX * (72pt/96px) = 12pt
EM to PX
Example:. 75em * 16px = 12px
EM to%
Example:. 75em * 100 = 75%

So when we write CSS, we need to be aware of:
1. Declare font-size=62.5% in the body selector;
2. Divide your original PX value by 10 and then replace it with EM as the unit;
3. Recalculate the EM values of the enlarged fonts. Avoid duplicate declarations of font size.
This is to avoid the 1.2 * 1.2 = 1.44 phenomenon. For example, when you declare a font size of 1.2em in #content, you can only have 1em when declaring the font size of p, not 1.2em, because this em is not em, it becomes 1em=12px because it inherits the font height of #content.
It is also important to note that the font size of the REM setting does not change as the browser's screen changes, and its change is related to the browser itself.

Finally, we provide a Px,em,rem unit conversion tool, address: http://pxtoem.com/

The difference between Px,em and REM in CSS