1.概念
首先来说说rem的概念，rem就是根元素的字体大小单位。
2.简单讲讲rem的概念
<html><head><meta charset="utf-8"><style type="text/css">html {font-size: 30px;}.div1 {font-size: 1rem;}.div2{font-size: 30px;}</style></head><body><div>123</div><div>456</div></body>
</html>
在这个代码中html就相当于根元素，在根元素上设置了一个字体大小，但是单位为px，而在下面的div1中也同样设置了字体大小单位为rem,我们来看看此时div中的字体的大小。
我们可以清楚的看到两个div中的字体是一样的大小。接下来我们将div1中的属性调为2rem，我们来看看字体的大小。
<html><head><meta charset="utf-8"><style type="text/css">html {font-size: 30px;}.div1 {font-size: 2rem;}.div2{font-size: 30px;}</style></head><body><div>123</div><div>456</div></body>
</html>
此时我们可以看到div1的字体变大了而div2的字体没有变大，此时我们在将div2的字体调为60px，我们在看看他们的大小。
我们可以清楚的看到它们的大小是一样的，所以可以得出rem就是与根元素的比例，例如根元素的文字大小为30px而div中的1rem也为30px，2rem就为60px。
3.总结
rem就是与根元素(html)的比例。
