CSS rem单位有多精细?

dar*_*tch 11 css units-of-measurement css3

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

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

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

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

Mik*_*ant 9

最终,您的粒度是1个物理像素(在技术上是现代浏览器中的子像素,但为了讨论的目的,我会忽略它).您可以根据或甚至精确到几位精度来计算不同的计算像素值.你再碰上的实际问题,渲染时,当浏览器最终四舍五入,以适应可在任何设备的像素密度是相对于参考像素密度(96ppi)的显示像素小数精度会丢失.emrem

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

现在让我们添加emrem混合.因此,让我们使用10px根元素字体大小的示例,并在其他元素上使用声明.001rem.这意味着您试图将此元素渲染为0.01(10px*.001rem)参考像素,这将转换为视网膜显示中的0.034个物理像素.你可以清楚地看到,rem0.001值幅度至少一个顺序进行物理显示一个显著差异,因为远.01rem在这种情况下会转化成0.34物理像素-圆润的显示器比对"更精确"的时候没有任何区别.001rem规格.

所以我认为,要定义比实际可以容纳在现实世界而言更为专一基于REM-CSS规则时,物理像素被画,除非您有一个非常高的根元素的大小定义和/或你有一个物理像素密度的屏幕比视网膜显示屏中的像素密度大一个数量级.我猜这后一种情况并非如此.

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