CSS rem单位有多精细？

3 回答

• 7

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

  实质上，该参考像素是1/96英寸 . 因此，CSS术语中的 1px 基本上意味着1/96 " at 96ppi. On screens with higher pixel densities (say like 326 ppi of many Apple " retina " screens), scaling takes place to convert the CSS reference pixel to physical pixels. For the retina display mentioned, this scaling factor would be ~3.4. So if you specified a CSS rule to set something to say 10px, the retina display browser should display on 34 physical pixels (assuming no other HTML changes (i.e. meta-elements) that would change display behavior). Because of this scaling behavior, the physical size of the element would still be 10/96"，这与在96ppi屏幕上呈现元素的物理尺寸完全相同 .

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

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

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

  回复于 2024-05-13T13:06:21+08:00
• 1

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

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

  我也试图编写一个JavaScript测试来测量精度，但 element.offsetHeight 它是一个整数，所以它对这个问题没用 . 除非有不同的方法来测量像素尺寸（带小数位） .

  EDIT 1 ：根据CSS规范（参见this和this），似乎没有关于小数位数的限制 .

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

  回复于 2024-05-13T13:06:21+08:00
• 1

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

  然而，在实践中，我的结论是：在Chrome中，你可以到达千分之一的地方 unlimited precision, until the fractional portion of the pixel value drops below 0.015 .

  EDIT ：一旦字体大小增加到更大的数字，原始结论就会发现有缺陷 .

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

  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>";
  }
  

  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;
  }
  

  <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>
  

  我的输出是：

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

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

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

  回复于 2024-05-13T13:06:21+08:00