Em&rem

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

px Pixels (Pixel). Relative length units. Pixel px is relative to the display screen resolution.

EM features

1. The value of EM is not fixed;

2. Em inherits the font size of the parent element.

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.

REM Features

REM is a new relative unit of CSS3 (root em, root em) that uses REM to set the font size for an element, 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.

Summarize:

• remand em units are calculated by the browser based on the font size in your design.
• emUnits are based on the font size that uses their elements.
• remThe unit html is based on the font size of the element.
• emThe unit may be affected by any inherited parent element font size
• remUnits can inherit the font size from the browser font settings.
• emThe units used should be based on the font size of the component instead of the root element's font size.
• Use if you don't need to use em units, and you need to scale based on the font size of your browser rem .
• Use rem units unless you are sure you need the em unit, including the font size.
• Units used in media queries rem
• Do not use in multi-column layouts em or rem , instead % .
• Do not use em or rem if zooming will inevitably result in breaking layout elements.

Excerpt from: Http://www.cnblogs.com/leejersey/p/3662612.html#top

Http://www.w3cplus.com/css/when-to-use-em-vs-rem.html

Em&rem