rem在设置宽度和高度的时候，该怎么进行计算呢？
比如html{font-size: 62.5%;}
那么font-size:2rem;与font-size:20px是一样的
但是width:20rem与width:200px是不一样的。
所以，当想用rem进行width与height进行设置时，该怎么计算呢？以谁为参照物呢？
解决方案
rem用来设置字体大小，也可以用于网格布局。rem中的r代表根元素，它的值就是根元素设置的字体大小。在大多数情况下，根元素就是html了。这个单位可以解决em设置字体时，由于继承带来的问题，具体如下：
body { font-size: 14px;}div { font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px}假设html存在这样的结构：
<body> <div> Test <!-- 14 * 1.2 = 16.8px --> <div> Test <!-- 16.8 * 1.2 = 20.16px --> <div> Test <!-- 20.16 * 1.2 = 24.192px --> </div> </div> </div></body>但是用rem能避免
html { font-size: 14px;}div { font-size: 1.2rem;}这样在上面的那三个嵌套的div的字体大小都是 1.2*14px = 16.8px 了。
在布局中，如下：
.container { width: 70rem; // 70 * 14px = 980px}