CSS3 Tutorial: Relative unit REM Detailed

Http://www.alixixi.com/web/a/2013062889595.shtml

Http://www.alixixi.com/web/a/2013062889594.shtml

Article Introduction: 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.

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.

CSS3 Tutorial: Relative unit REM Detailed