为什么rem和px出来的大小不一样

Question

问题描述

按理说结果都是80px，但为什么大小不一样，出来后用开发者工具看了下，.one的这个div宽高是80，.two的这个div宽高是96

看代码：

<div class="one"></div>
<div class="two"></div>

html{
  font-size:10px;
}

.one{
  background:red;
  width:80px;
  height: 80px;
}

.two{
  background:blue;
  width:8rem;
  height: 8rem;
}

结果：

Answer 1

chrome一般会有最小字体限制，比如我的是：

你得确保你定的font-size是大于这个限制的，由于你不能保证用户的浏览器是怎么设置的，所以一般定rem基值的时候也会取一个大一点+好算的值。

Answer 2

因为现在大部分浏览器，支持的最小字体大小是12px，所以你设置的10px过小，则会按最小的字体大小12px计算，结果就是8 * 12px

Answer 3

1rem默认是16px，你可以自由设置rem的大小。引入rem这个东西本来就是为了解决不同设备之下的尺寸大小问题，本身和px就不是固定的对应关系。

Answer 4

想问一下，是不是你chrome版本的问题；我试了以上所有可能，还是没有出现你所描述的问题！