先看定义。
rem（font size of the root element），意为根据网页的根元素来设置字体大小，和em（font size of the element）的区别是，em是根据其父元素的字体大小来设置，而rem是根据网页的根元素html来设置字体大小的。
em由于参考的是父元素字体大小，所以用em做弹性布局时，一旦某个节点的字体大小变化，那么后代元素都需要重新计算。
ren取值分为两种情况：
// 作用于根元素，相对于原始大小（16px）,所以html的font-size为32px
html {font-size: 2rem}
// 作用于非根元素，相对于根元素字体大小，所以为64px
p {font-size: 2rem}
rem适配
<style>
.con {
width: 10rem;
height: 10rem;
background-color: red;
}
</style>
<div class="con"></div>
在上面这段代码中，宽度和高度都使用rem为单位，那么在浏览器中是什么样子？
可以看到是一个160 x 160的矩形，因为html根元素的默认font-size就是16px。
16px是W3C默认的，在浏览器中也可调整。Chrome中，如果将字号缩小，那么渲染的图形也会变小。
接着上例，可以修改html元素的font-size。
<style>
html {
font-size: 20px;
}
.con {
width: 10rem;
height: 10rem;
background-color: red;
}
</style>
<div class="con"></div>
html的font-size调整为20px，20/16=1.25，1.25*160就知道子元素应该扩大多少了。
由此，给html设定不同的值，从而达到我们css样式中的适配效果。
动态的rem
通过JS动态获取浏览器窗口宽度，并将html的font-size设置为当前窗口宽度，这样，就可以用当前窗口宽度的百分比来表示子节点宽度了。
<script>
var pageWidth = document.documentElement.clientWidth;
var styleContent = 'html {font-size:' + pageWidth + 'px;}'
var style = document.createElement("style");
style.innerHTML = styleContent;
document.head.appendChild(style);
</script>
窗口宽度为700px，即document.documentElement.clientWidth的值为700px，这个值将被JS获取到并写入到html元素的font-size中，构成根元素的1rem = 700px。之后，html下的所有子节点都可以用1rem的分数来表示了。
.half需要50%的width，即width: 0.5rem，即最后渲染尺寸宽度为350px。
.full为100%宽度，width: 1rem和html根元素相同。
当然，用1rem来表示还是会不方便（0.5、0.05、0.001等等），比如可以将窗口宽度/16，以800px窗口宽度为例，var styleContent = 'html {font-size:' + pageWidth/16 + 'px;}'，如此，1rem = 50px(800/16)。
如上，窗口宽度800px，
1rem=50px。这样设置，不管在什么窗口宽度下，两个DIV占窗口宽度永远是50%。
网友评论