Question

我正在使用基于网站平均视口大小的CSS rem单元开发可扩展的移动/桌面友好型网站。

对于某些填充和边距，我一直将rem大小设置为低至0.001rem，这在我的Firefox浏览器中运行正常......但它是否适用于所有现代浏览器？

我只是质疑使用0.001rem单位的能力，因为我在千分之前看到的最高粒度是百分之百的不透明度......比如opacity:0.25。

rem单位有多低？现代浏览器中0.00000001rem值是否可接受？

Answer 1

最终，您的粒度是1个物理像素（技术上是现代浏览器中的子像素，但出于本讨论的目的，我将忽略它）。您可以根据em或rem提供不同的 计算的 像素值，甚至可以达到几位精度。然后，当渲染时，当浏览器最终四舍五入以适应设备像素密度相对于参考像素密度（96ppi）时可用的像素时，您会遇到现实世界的问题。

实质上，此参考像素是1/96英寸。所以CSS术语中的1px基本上意味着1/96“at 96ppi。在具有更高像素密度的屏幕上（比如许多Apple”视网膜“屏幕的326 ppi），缩放发生以将CSS参考像素转换为物理像素对于上面提到的视网膜显示，这个比例因子大约是3.4。所以如果你指定一个CSS规则来设置10px的东西，视网膜显示浏览器应该显示34个物理像素（假设没有其他HTML变化（即元元素）这将改变显示行为）。由于这种缩放行为，元素的物理尺寸仍然是10/96“，这与在96ppi屏幕上渲染元素的物理尺寸完全相同。

现在让我们添加em和rem。因此，让我们使用10px根元素字体大小的示例，并在.001rem的其他元素上使用声明。这意味着您要尝试将此元素渲染为0.01（10px * .001rem）参考像素，这将转换为视网膜显示中的0.034个物理像素。你可以清楚地看到0.001的rem值至少比物理显示的显着差异大一个数量级，因为在这种情况下.01rem会转化为0.34个物理像素 - 没有区别时四舍五入显示而不是“更精确”.001rem规范。

所以我认为你定义的基于rem的CSS规则的特异性要远远超过在绘制物理像素时实际可以容纳的范围，除非你定义了非常高的根元素大小和/或你物理屏幕的像素密度比视网膜显示屏的像素密度大一个数量级。我猜这后一种情况并非如此。

仅仅因为CSS可以计算为3位小数精度或其他任何值，这并不意味着物理渲染可以以相同的精度水平发生。

Answer 2

JSBin上的一个简单示例显示，1.001 rem的高度呈现为18.0156 px，而1.0001 rem的高度呈现18 px（这将是与仅使用1 rem）相同。

这意味着您可以具有3位小数精度（至少在桌面版Chrome中使用常规字体大小）。

我还试图编写一个JavaScript测试来测量精度，但是element.offsetHeight它是一个整数，因此它对此无用。除非有不同的方法来测量像素尺寸（带小数位）。

编辑1 ：根据CSS规范（请参阅this和this），似乎没有关于小数位数的限制。

但最后，我认为你受到设备像素密度的限制。屏幕上的物理像素是不可分割的，因此所有计算的尺寸都舍入到最接近的整数。

Answer 3

＆＃34; CSS理论上支持所有值类型的无限精度和无限范围;但实际上实现具有有限的容量。 UA应该支持合理有用的范围和精度。＆＃34; ^w3.org

但实际上，我的结论是：在Chrome中，你可以得到~~到千分之一~~ 无限精度，直到像素值的小数部分降到0.015以下

编辑：一旦字体大小增加到更大的数字，原始结论就会有缺陷。

自己测试（我使用Element.getBoundingClientRect()）：

＆＃13;

var l = [
  "normal",
  "tens",
  "hundreds",
  "thousands",
  "ten-thousands",
  "hundred-thousands"
];
var o = document.getElementById("output");

for (var i = 0; i < l.length; i++) {
  o.innerHTML += l[i] + ": " + document.getElementById(l[i]).getBoundingClientRect().height + "px<br>";
}

＆＃13;

body,
html {
  font-size: 1000px;
}
#normal {
  height: 1rem;
}
#tens {
  height: 1.1rem;
}
#hundreds {
  height: 1.01rem;
}
#thousands {
  height: 1.001rem;
}
#ten-thousands {
  height: 1.0001rem;
}
#hundred-thousands {
  height: 1.00001rem;
}
#output {
  font-size: 16px;
}

＆＃13;

<div id="output"></div>
<br>
<div id="normal">Hello</div>
<div id="tens">Hello</div>
<div id="hundreds">Hello</div>
<div id="thousands">Hello</div>
<div id="ten-thousands">Hello</div>
<div id="hundred-thousands">Hello</div>

＆＃13;

我的输出是：

normal: 1000px
tens: 1100px
hundreds: 1010px
thousands: 1001px
ten-thousands: 1000.09375px
hundred-thousands: 1000px

~~表示千分之一（0.00001）超出浏览器支持的精度。~~

在进一步增加字体大小并且使用它之后，我找不到将产生具有小数部分<0的像素值的值。 0.015。（尝试设置font-size: 1556px和1557px）

CSS rem单位有多精细？

3 个答案: