首页 > rem图片怎么换算的

rem图片怎么换算的

看到别人的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的,宽高是怎么算出来的??


一般来说浏览器的标准字体大小是 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/

希望有所帮助~ :)


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

【热门文章】
【热门文章】