想用rem给width与height进行赋值时，该怎么计算呢？以谁为参照物呢？

Question

rem在设置宽度和高度的时候，该怎么进行计算呢？比如html{font-size:62.5%;}那么font-size:2rem;与font-size:20px是一样的但是width:20rem与width:200px是不一样的。所以，当想用rem进行width与height进行设置时，该怎么计算呢？以谁为参照物呢？

Answer 1

rem用来设置字体大小，也可以用于网格布局。rem中的r代表根元素，它的值就是根元素设置的字体大小。在大多数情况下，根元素就是html了。这个单位可以解决em设置字体时，由于继承带来的问题，具体如下：
body{
font-size:14px;
}
div{
font-size:1.2em;//calculatedat14px*1.2,or16.8px
}
假设html存在这样的结构：
Test
Test
Test
但是用rem能避免
html{
font-size:14px;
}
div{
font-size:1.2rem;
}
这样在上面的那三个嵌套的div的字体大小都是1.2*14px=16.8px了。
在布局中，如下：
.container{
width:70rem;//70*14px=980px
}
参考文章
                            

Answer 2

rem这个单位是相对于根元素的，是可以用来设置width和height的，只是计算的基准是html标签的font-size值，这里建议html的font-size值用px，不要用百分比；不过呢html的font-size最好是通过js来动态计算一个数值:
//-设置根元素fontSize~
(function(doc,win){
var_root=doc.documentElement,
resizeEvent='orientationchange'inwindow?'orientationchange':'resize',
resizeCallback=function(){
varclientWidth=_root.clientWidth,
fontSize=20;
if(!clientWidth)return;
if(clientWidth<640){
fontSize=20*(clientWidth/320);
}else{
fontSize=20*(640/320);
}
_root.style.fontSize=fontSize+'px';
};
if(!doc.addEventListener)return;
win.addEventListener(resizeEvent,resizeCallback,false);
doc.addEventListener('DOMContentLoaded',resizeCallback,false);
})(document,window);