首先，什么是rem，相信em大家都听过并经常用，em是一个相对长度单位，最初是指字母M的宽度，故名em。现指的是字符宽度的倍数，用法类似百分比，如：0.8em, 1.2em,2em等。通常1em=16px。rem也是一个相对单位长度，但是rem是相对于根元素（即html元素)的字体大小的单位，而em是相对于当前的父级元素的字体大小的单位。rem可以实现自适应。

　　接下来我们了解一下rem的用法吧。

1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <style type="text/css">
 6         html{
 7             font-size: 20px;
 8         }
 9 
10         #div1{
11             width: 6rem;
12             height: 5rem;
13            background-color:red;
14         }
15     </style>
16 </head>
17 <body>
18 <div id="div1"></div>
19 </body>
20 </html>

irediscent中文 reedem中文_html

　　div1的长和高分别为120*100，我们设置的html元素的字体大小为20px，可见在这里1rem=20px；

1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <style type="text/css">
 6         html{
 7             font-size: 40px;
 8         }
 9 
10         #div1{
11             width: 6rem;
12             height: 5rem;
13             background-color:red;     
14  }
15     </style>
16 </head>
17 <body>
18 <div id="div1"></div>
19 </body>
20 </html

irediscent中文 reedem中文_css_02

　　div1的长和高分别为240*200，我们设置的html元素的字体大小为20px，可见在这里1rem=40px；

　　在上面两个例子中我们发现第一个案例div是等比例放大到第二个div，html的font-size的改变就会导致div的大小发生改变，我们并不需要改变先前给div设置的宽度和高度。利用这个特性，我们可以很好地根据屏幕分辨率把网页进行缩放。

　　那么怎么计算出不同分辨率下font-size的值？

irediscent中文 reedem中文_缩放_03

　　上面这张图是按照640的标准尺寸的，当屏幕宽度为640时，html font-size为20px；当屏幕为480时，480/640=0.75；0.75*20=15px；其他宽度时也类似地计算。

JS去动态计算根元素的font-size，或者可以针对那些设备去做media query设置也可以实现适配。