CSS3 the use of REM in the detailed

To set the font in the page, we know there are two common, px and em.

Px

In Web page production, we generally use "px" to set our text, because he is more stable and accurate. However, there is a problem with this approach, when the user in the browser to browse our web page, he changed the browser font size (although the average person will not change the browser font size), then use our web page layout is broken, then put forward to use "em" to define the Web page font.

Em

Generally, it's a body font-size benchmark.
Common wording:

01020304050607080910111213141516

body {    font-size: 62.5%;    /*10 ÷ 16 × 100% = 62.5%*/}h1 {    font-size: 2.4em;    /*2.4em × 10 = 24px */}p {    font-size: 1.4em;    /*1.4em × 10 = 14px */}li {    font-size: 1.4em;    /*1.4 × ? = 14px ? */}

Why "Li" "1.4em" is not "14px" will be a question mark? When using "Em" as a unit, you need to know the setting of its parent element, because "em" is a relative value, and it is a value relative to the parent element.
Calculation formula: 1÷ The Font-sizex of the parent element needs to convert the pixel value = em value
In this case, "1.4em" can be "14px", or "20px", or "24px", in short is an indeterminate value, then solve the problem, either you know the value of its parent element, or you can use "1em" in any child element.

Rem

REM:W3C Official website description is "font size of the root element", i.e. REM is relative to the root elements.
We only need to determine a reference value in the root element, set the size of the root element of the font, which can be completely based on your own needs, you can also refer to:

Too much to convert the trouble of the classmate, you can also go to http://pxtoem.com/this site to set
Common wording:

010203040506070809101112

html {    font-size: 62.5%;    /*10 ÷ 16 × 100% = 62.5%*/}body {    font-size: 1.4rem;    /*1.4 × 10px = 14px */}h1 {    font-size: 2.4rem;    /*2.4 × 10px = 24px*/}

A basic font size of 62.5% (that is, 10px) is defined in the root element. Setting this value is mainly convenient for calculation, if not set, it will be "16px" as the benchmark). From the results above, we use "REM" as convenient as using "px", and also solve the difference between "px" and "em".
Note: Under Chrome, the default font is 12PX, you can set font-size:625%, and so on

Browser compatibility

IE9 above and other support CSS3 browser is sure to support, if you want to compatible with the low version of IE, it can be considered for the lower version of the IE9 browser, using PX to achieve.

AD: the "Chrome QR Code plugin" w3cways QR code Generator Reprint Please specify the Source: Web Front End (w3cways.com)-The path of Web front-end learning? CSS3 the use of REM in the detailed

CSS3 the use of REM in the detailed