CSS Relative unit rem detailed

CSS3 has added a relative unit REM (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.

CSS3 's appearance, he also introduced some new attributes, including what we call REM today. The "font size of the root element" is described in this web site.

EM units are relative to the parent node's font-size, there are some combinatorial problems, and REM is relative to the root node (or an HTML node), that is, you can define a separate font size in the HTML node, and then all other elements are set using REM relative to the percentage of the font, This means that we only need to determine a reference value in the root element and how large the font is to be set in the root element, which is exactly what you need.

Example:

HTML {font-size:62.5%;/*10÷16x100% = 62.5%*/} body {font-size:1.4rem;/*1.4x10px = 14px */} h1 {font-size:2.4 rem;/*2.4x10px = 24px*/} p {font-size:14px; font-size:1.4rem;} /*IE8 and previous versions of IE browser use 14 pixels */

The root element defines a base font size of 62.5% (that is, 10px. Setting this value is mainly convenient for calculation, if not set, it will be "16px" as the benchmark).

From the results above, we use the "Rem size font" as easy as using the "PX size font".

This can be completely according to your own needs, we can also refer to:

IE9 and earlier versions can only scale text that is set in relative units when the user adjusts the page text size using the View > Text Size menu (text that is set with absolute units, such as pixels, cannot be scaled). In other words, the use of REM units in IE7 and IE6 has a small side effect that users of these browsers must use "View > Zoom" To resize the entire page. This, of course, is a reason why you should upgrade to a modern browser.

EM features1. The value of EM is not fixed; 2. EM inherits the font size of the parent element. So when we write CSS, we need to pay attention to two points: 1. The body selector declares font-size=62.5%; 2. Divide your original PX value by 10 and then replace it with EM as Unit 3. Recalculate the EM values of those magnified 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. Example

HTML {font-size:100%;}. box-0 {    height:1em;/* At this time height equals 16px */} www.111cn.net.box-1 {     font-size:0.625em;/* The base font size is changed to 16*0.625=10px * /     height:1em;/* At this time the actual height equals 10px */}

　　

CSS Relative unit rem detailed