CSS3 REM Units

http://blog.csdn.net/huang100qi/article/details/29845359

remis a newly added unit value in CSS3, which, em like the unit, is a relative unit. The difference is that it is calculated relative to the parent element of the element, relative to the em font-size rem root element html font-size . This rem makes it possible to bypass complex hierarchical relationships and implement a em unit-like function.

Use of REM

It says that the em font size is set relative to its parent element, so there is a problem with any element setting, and it may be necessary to know the size of his parent element, which, when we use it many times, presents an unpredictable risk of errors. And it's relative to the root rem element , which means that we just need to determine a reference value in the root element, the reference value is set to how much, can be determined according to your own needs.

Suppose you use the browser's default font size 16px to see px rem the conversion relationship between some units and:

| px | rem |------------------------| 12 | 12/16 = .75 || 14 | 14/16 = .875 || 16 | 16/16 = 1 || 18 | 18/16 = 1.125 || 20 | 20/16 = 1.25 || 24 | 24/16 = 1.5 || 30 | 30/16 = 1.875 || 36 | 36/16 = 2.25 || 42 | 42/16 = 2.625 || 48 | 48/16 = 3 |------------------------- 

If you want to set a different value, you need to define it in the root element, and in order to make it easier to calculate, you will often set the value in the element font-size 62.5% :

[CSS]View Plaincopy

2. <code class="CSS" style="display:block; Overflow-x:auto; Font-family:consolas; Padding:0.5em "><span class=" tag "style=" Color:rgb (133,153,0) ">html</span> <span class= " rules" ><span class="rules" >{
3. <span class="Rule" ><span class="Attribute" style="Color:rgb (181,137,0)" ><span class="Rule" ><span class="Attribute" >font-size</span></span></span><span class="Rule" >:<span class="Value" ><span class= "value" > <span class= "number"  style= "Color:rgb (42,161,152)" ><span class= "number" > 62.5</span></span>%;</span></span></span><span class = "value" ></span></span> <span class= " Comment " style=" margin-bottom:0px!important; display:inline!important;  Vertical-align:top; color:rgb (88,110,117);  font-style:italic "><span class= "comment"  style= "vertical-align:top; margin-bottom:0px! Important; display:inline!important ">/* 10 ÷ 16 x 100%  = 62.5% */</span></span>  
5. <span class="rule" ><span class="rule" >}</span></span></span><span class= "rule" ></span></span>
7. </code>

Equivalent to set in font-size 10px , the value shown in the example above will change:

| px | rem |-------------------------| 12 | 12/10 = 1.2 || 14 | 14/10 = 1.4 || 16 | 16/10 = 1.6 || 18 | 18/10 = 1.8 || 20 | 20/10 = 2.0 || 24 | 24/10 = 2.4 || 30 | 30/10 = 3.0 || 36 | 36/10 = 3.6 || 42 | 42/10 = 4.2 || 48 | 48/10 = 4.8 |------------------------- 

Because rem it is a property in CSS3, a lot of people first focus on the browser to his support, I truncated a caniuse to the rem properties of the compatibility table:

You can clearly know, rem in many browsers have been very good support, if your project does not consider the low version of IE, you can rest assured that the use of, if your project in the low version of IE also occupy a lot of proportion, then you are still worried about the use of rem incompatible, but dare not to use. In fact, it is not necessary to do some processing for the low version of IE browser:

[CSS]View Plaincopy

1. <Code class="CSS" style="Display:block; Overflow-x:auto; Font-family:consolas; Padding:0.5em "><span class="Tag" style="Color:rgb (133,153,0)" >html</span> <span class="Rules" ><span class="Rules" >{<span class="Rule" ><span class="Attribute" style="Color:rgb (181,137,0)" ><span class="rule" ><span class="attribute" >font-size</span></span></span><span class= "rule" >:<span class="value" ><span class="value" > <span class="number" style=" Color:rgb (42,161,152) "><span class=" number ">62.5</span></span>%;</span></ Span></span><span class="value" ></span></span> <span class="rule" >< span class="rule" >}</span></span></span><span class="rule" ></span> </span>
2. <span class="Tag" style="Color:rgb (133,153,0)" >body</span> <span class="Rules" ><span class="Rules" >{<span class="Rule" ><span class="Attribute" style="Color:rgb (181,137,0)" ><span class="Rule" ><span class="Attribute" >font-size</span></span></span><span class="Rule" >:<span class="Value" ><span class="Value" > <span class="Number" style="Color:rgb (42,161,152)" ><span class="Number" >14</span></span>px;</span></span></span><span class="Value" ></span></span> <span class="Rule" ><span class="Attribute" style="Color:rgb (181,137,0)" ><span class="Rule" ><span class="Attribute" >font-size</span></span></span><span class="Rule" >:<span class="Value" ><span class="Value" > <span class="Number" style="Color:rgb (42,161,152)" ><span class= "number" >1.4</span></span>rem;</span></span ></span><span class= "value" ></span></span> <span  class= "rule" ><span class= "rule" ></span></span>  <span class= "comment"  style= "margin-bottom:0px! Important; display:inline!important; vertical-align:top; color:rgb (88,110,117);  font-style : Italic "><span class=" comment " style=" Vertical-align : Top; margin-bottom:0px!important; display:inline!important ">/* =14px  */</span></span>  
3. <span class="Tag" style="Color:rgb (133,153,0)" >h1</span> <span class="Rules" ><span class="Rules" >{<span class="Rule" ><span class="Attribute" style="Color:rgb (181,137,0)" ><span class="Rule" ><span class="Attribute" >font-size</span></span></span><span class="Rule" >:<span class="Value" ><span class="Value" > <span class="Number" style="Color:rgb (42,161,152)" ><span class="Number" >24</span></span>px;</span></span></span><span class="Value" ></span></span> <span class="Rule" ><span class="Attribute" style="Color:rgb (181,137,0)" ><span class="Rule" ><span class="Attribute" >font-size</span></span></span><span class="Rule" >:<span class="Value" ><span class="Value" > <span class="Number" style="Color:rgb (42,161,152)" ><span class= "number" >2.4</span></span>rem;</span></span ></span><span class= "value" ></span></span> <span  class= "rule" ><span class= "rule" ></span></span>  <span class= "comment"  style= "margin-bottom:0px! Important; display:inline!important; vertical-align:top; color:rgb (88,110,117);  font-style : Italic "><span class=" comment " style=" Vertical-align : Top; margin-bottom:0px!important; display:inline!important ">/* =24px  */</span></span>  
5. </code>

This solves the problem of incompatible with the low version of IE, but gives birth to another disadvantage, which is to increase the amount of code. Must have the fish and bear paw many times can not be both.

CSS3 REM Units