css3 rem is a newly defined attribute set the font size, the font size is set to two commonly used are the following two kinds:
. 1, PX units
2, em units (with a similar percentage of usage em)
PX units
Web page in early production, we are using the "px" to set our text, because he is quite precise and fixed. As long as the page of an element provided px font size, its children / descendants element is not set font size, or set the font size css priority is not the parent element is high, the sub-element / descendant elements inherit px font size settings of its parent element . But there are ways a problem: When a user browses the Web page we created in the browser, he changed the browser's font size, then use our Web page layout is broken. So for those who care about their website front-end user readability and user experience, it is a big problem. Therefore, when it is proposed to use "em" to define the Web page font.
em units
Also said earlier, is to use the page layout will be broken when the "px" will zoom in or zoom through the pages in a browser, to solve this problem, we can use the "em" units.
When using the "em" as a unit, necessarily need to know that the font size of the parent element is provided, as is a relative value "em", and is a relative value of the parent element font size (scaling ratio / scaling factor)
Example:
The parent element is 16px, 1.4em child element is set to the actual font size of child elements 16px x 1.4 = 22.4px
So "1.4em" may be "14px", can be "20px", or rather "24px", in short, is an uncertain value, as to determine how much value is necessary to know the value of its parent element!
Why rem units
From the above description, setting affects the child elements in px / descendant elements display font size, and also provided em units determined according to the font of the parent element. This time the font size of the parent element becomes a very critical!
The rem is relative to the page root element <html>, so that means we only need to determine the value of a reference to the root element, other elements are set to rem size font size html as a reference value a font size scaling, with reference to FIG font size value of the standard:
Let's look at a simple code examples:
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*/}
I am the root element < HTML definition> in a basic font size is 62.5% (that is 10px set this value mainly to facilitate the calculation: That 1.2rem 12px, 1.6rem that is 16px If not set, it will be based. Browser default "16px" basis).