CSS3 Tutorial: Relative unit REM Detailed

Article Introduction: CSS3 has added a relative unit of REM (root em, root em), a unit that 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 in size, but only relative to the HTML root element.

CSS3 has added a relative unit of REM (root em, root em), a unit that 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 in size, but only relative to the HTML root element. This unit is a set of relative size and absolute size of the advantages in one, through which you can only modify the root element in proportion to adjust all the font size, but also to avoid the font size by layer compound chain reaction. Currently, all browsers support REM in addition to IE8 and earlier versions. For browsers that do not support it, the answer is also simple: write an absolute unit statement. These browsers will ignore the font size set with REM.

With the advent of CSS3, he introduced some new attributes, including the REM we call today. This describes REM on the Web site--"font size of the root element."

The EM unit is font-size relative to the parent node, and there are some combinatorial problems, and REM is relative to the root node (or HTML node), meaning that you can define a single 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 at the root element, and how much of the font is set in the root element, which is entirely up to your own needs.

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 using 14 pixel */

A base font size of 62.5% (that is, 10px) is defined in the root element. Setting this value is primarily convenient for calculation, and if not set, it will be "16px" as the benchmark.

From the results above, we used the "Rem size font" as conveniently as using the PX size font.

This can be based on your own needs, you can also refer to the following figure:

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