The px, em, and rem explanations in CSS

Concept Introduction:

1, px (pixel, pixels ) : is a virtual length unit, is the digital image length unit of the computer system, if PX to be converted to physical length, you need to specify the accuracy dpi (Dots per inch, pixels per inch), When scanning printing generally have dpi optional. Windows system By default is 96dpi,apple system default is 72dpi.

2, em ( relative length units, relative to the font size of the text within the current object ) : is a unit of relative length, originally referred to as the width of the letter m, hence the name Em. Now refers to a multiple of the width of the character, using a similar percentage, such as: 0.8em, 1.2em,2em and so On. Usually 1em=16px.

3, pt (point, LB ) : is a unit of physical length, which refers to one inch of 72 points. pt=1/72 ( inches ), px=1/dpi ( inches )

4, rem (root em, root em): CSS3 is a new relative unit, 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.

1, the problem of EM and px

What is px?

px Pixels (Pixel). Relative length Units. Pixel px is relative to the display screen Resolution. (quoted from CSS2.0 Manual)

EM is the relative length Unit. The font size relative to 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. (quoted from CSS2.0 Manual)

PX Features

1. IE cannot adjust the font size using PX as the unit;

2. Most of the foreign sites can be adjusted because they use EM or rem as font units;

3. Firefox can adjust PX and em,rem, but more than 96% of Chinese netizens use IE browser (or kernel).

What is em?
EM refers to the high font, any browser default font height is 16px. So the unmodified browser is compliant with: 1em=16px. So 12px=0.75em, 10px=0.625em. To simplify the conversion of font-size, you need to declare font-size=62.5% in the body selector in the css, which makes the EM value 16px*62.5%=10px, so 12px=1.2em, 10px=1em, That means you just have to divide your original PX value by 10 and then put EM in as the Unit.

EM features:
1em refers to the size of a font, which inherits the font size of the parent element, and therefore is not a fixed Value. The default font size for any browser is 16px. therefore, 12px = 0.75em. In practice, to facilitate conversion, the following styles are usually set:
CSS Code
HTML {font-size:62.5%;}

This way, 1em = 10px. The 1.2em we use is theoretically 12px. however, This conversion is not established in IE browser, 1.2EM is slightly larger than 12px, the solution is to change the HTML tag style of 62.5% to 63%, namely:
CSS Code
HTML {font-size:63%;}

In Chinese articles, it is common to have two empty sections at the beginning of the Paragraph. If using PX as the unit, the 12px font needs to be empty 24px, for 14px fonts need to be free of 28px ... This conversion is very non-generic. If the use of EM units, the problem is very good solution, 1 characters is 1em, the size of the two words is 2em. so, just define It:
CSS Code
P {text-indent:2em;}

The difference between the EM and px two font units
Font units should use EM instead of px, for the simple reason that support IE6 font scaling, Press CTRL + SCROLL wheel in the page, the font in PX units of the site did not respond. PX is absolute unit, does not support IE zoom, em is relative unit.
When I adjusted this blog, I found that not only the font, the line spacing (line-height), and the vertical height of the units are used Em. Ensure the integrity of the zoom Time.

EM has the following characteristics:
1. The value of EM is not fixed;
2. Em inherits the font size of the parent Element.

EM rewrite steps:
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;
Simply put, if you only need the above two steps to solve the problem, probably no one will use Px. After these two steps, you will find that your website font is too big to Imagine. Because the value of EM is not fixed and inherits the size of the parent element, you might set the font size to 1.2em, or 12px, in the content Div. Then you also set the selector p font size to 1.2em, but if p belongs to the content of the child, the font size of P is not 12px, but 1.2em= 1.2 * 12px=14.4px. This is because the font size of the content is set to 1.2em, the EM value inherits the size of the body of its parent element, which is 16px * 62.5% * 1.2=12px, and P as its child, em inherits the content of the font high, that is, 12px. So the 1.2em of P is no longer 12px, but 14.4px.
3. Recalculate the EM values of the enlarged fonts. Avoid duplicate declaration of font size, that is, avoid the above mentioned 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.
12px Kanji in Ie:
The completion of the EM conversion also found a strange phenomenon, is obtained by the above method 12px (1.2em) size of Chinese characters in IE does not equate directly with 12px defined font size, but slightly larger. You only need to change the 62.5% to 63% in the body selector to display it properly. The reason may be that when IE processes Chinese characters, the accuracy of the value of floating point is Limited. This phenomenon occurs only in 12px kanji, which does not exist in English. The solution is to change the 62.5% in Style.css to 63%.

A px, em, pt unit conversion Tool:

Address: http://pxtoem.com/

2. 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.

Example:

P {font-size:14px; font-size:.875rem;}

Attention:

Choosing which font units to use is primarily up to your project, and if your user base is using the latest version of the browser, it is recommended to use rem, if you want to consider compatibility, use px, or Both.

3. Font conversion Table

Size	Pt	Px	Em
First number	42pt	56px	3.5em
Little Beginning	36pt	48px	3em
	34pt	45px	2.75em
	32pt	42px	2.55em
	30pt	40px	2.45em
	29pt	38px	2.35em
	28pt	37px	2.3em
	27pt	36px	2.25em
Number One	26pt	35px	2.2em
	25pt	34px	2.125em
Entering Primary One	24pt	32px	2em
Number second	22pt	29px	1.8em
	20pt	26px	1.6em
Waiter	18pt	24px	1.5em
	17pt	23px	1.45em
Number third	16pt	22px	1.4em
Small Three	15pt	21px	1.3em
	14.5pt	20px	1.25em
Number Fourth	14pt	19px	1.2em
	13.5pt	18px	1.125em
	13pt	17px	1.05em
Being	12pt	16px	1em
	11pt	15px	0.95em
Number Fifth	10.5pt	14px	0.875em
	10pt	13px	0.8em
Xiao Wu	9pt	12px	0.75em
	8pt	11px	0.7em
Number Sixth	7.5pt	10px	0.625em
	7pt	9px	0.55em
Xiao Liu	6.5pt	8px	0.5em
Number Seventh	5.5pt	7px	0.4375em
Number Eighth	5pt	6px	0.375em

　　　　

Reference Blog 1:http://blog.sina.com.cn/s/blog_64af5bfe0100ihpb.html

Reference Blog 2:http://www.cnblogs.com/leejersey/p/3662612.html

Reference Blog 3:http://www.cnblogs.com/zhangpengshou/archive/2012/08/04/2623061.html

The px, em, and rem explanations in CSS