想用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存在这样的结构：TestTestTest但是用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