rem图片怎么换算的

Question

看到别人的CSS 图片可以自适应屏幕

.btn {
width: 11.33655rem;
height: 2.31884rem;
background:url(...);
-webkit-background-size:100% 100%;
-moz-background-size:100% 100%;
-o-background-size:100% 100%;
background-size:100% 100%;

原图是880*180的，宽高是怎么算出来的？？

Answer 1

一般来说浏览器的标准字体大小是 16px，即为 1em（当然这个默认字体是浏览器的设置中设定的，你可以根据喜好自行修改），如此说来 1em = 16px。那么什么是 rem 呢，其实 rem = root em 就是你的 DOM 根节点的字体大小，一般是 body。举例来说：

body {
  font-size: 0.675em; /* 这个表示 默认的 root 字体大小定义为 0.675em 即 10px */
}

h1 {
  /* 由于上面的设置，body 指定了根节点的字体大小，其他的元素都将根据根节点的大小进行相对转换，因此这里的 h1 的实际大小就能换算成 10px 了，相对的如果设置为 1.2rem 就相当于 12px */
  font-size: 1rem; /* 如果这里设置为 1em，那么它还是 16px */
}

因此，具体还得找到根节点里的基准换算值来确定后面的换算标准。

这里又张换算 em 和 px 的表可以参考下，http://pxtoem.com/

希望有所帮助~ ：）

Answer 2

rem值是根据document.documentElement.style.fontSize来计算的。有的人会重新对该值赋值（比如动态计算设备的宽度大小来计算一个响应式的比例），有的人会根据原始大小来设定。