为啥在 CSS 百分比宽度中使用长小数点值？

Posted 2023-03-06

技术标签:

【中文标题】为啥在 CSS 百分比宽度中使用长小数点值？【英文标题】：Why use long decimal point values in CSS percentage widths?为什么在 CSS 百分比宽度中使用长小数点值？ 【发布时间】：2012-12-31 03:08:01 【问题描述】：

我在自己的工作中注意到，当宽度设置为 33.333% 而不是仅设置 33% 时，3 个流体列可以更好地填充其父元素。在研究各种 CSS 框架（即 bootstrap.css）时，我还注意到它们的列宽指定了 14 位小数！这似乎是过度或聪明......但我不知道是哪个。

那么有这么多小数位的价值/好处是什么？根据我收集到的信息，关于您是否应该避免使用小数位或利用小数位存在公开辩论，我想知道我是否应该对此感兴趣或不担心。

【问题讨论】：

我猜这取决于浏览器的实现。有些浏览器可能会将值解析为 int，而其他浏览器则解析为 float 或 double？浏览器的百分比四舍五入方式各不相同。 【参考方案1】：

在某些情况下是必需的。我正在使用 Twitter Bootstrap 的网站上工作，该网站有 6 个 div 延伸整个网站的宽度。如果我只是让每个 16.66% 的宽度在最后留下一个明显的间隙，如果我让宽度 16.67% 一个 div 被推到下面的行。这意味着让 div 填充整个空间，我必须将宽度设置为 16.6667%，这在 Chrome 和 Firefox 中完美运行，但似乎 Safari 和 IE 将小数点四舍五入到 2 位，所以我只剩下一个使用它们时的间隙。所以有时它可能看起来过度，但有时它实际上是需要的。

戴夫

【讨论】：

我会使用width: calc(100vw / 6);，但我也喜欢看到 IE 用户受苦，所以在我的情况下效果很好或者，calc(100% / 6)【参考方案2】：

您可能会争辩说，4 位小数对于当前的技术来说是明智的。

将width: 33.33% 用于 3 列会很好 — 即使是 4k 屏幕也不会显示间隙（4096px 的 99.99% = 4,095.5px，四舍五入到 4096px，因此没有间隙）

但其他比率可能。

4k 屏幕上的 1 个像素是 1/4096 = width: 0.00024%，所以 4 d.p.将保证没有间隙。 8k screens 也是安全的……事实上，如果您的尺寸精确到 4 d.p.，则需要 20,000 像素宽的屏幕才有可能出现间隙。

……浏览器支持当然允许！有些人已经注意到一些浏览器会截断到 2 d.p.，破坏运动。

【讨论】：

【参考方案3】：

因为33 ≠ 33.33333。

如果您将三个div 设置为 33%，则剩下 1% 需要填充。这是合乎逻辑的。

【讨论】：

我了解 33 与 33.333 不同，依此类推，并且我了解浏览器以不同的方式舍入百分比。当我看到twitter.github.com/bootstrap 使用了 14 位小数时，我的好奇心被触动了。到目前为止，我找不到任何理由让你需要走那么远。这对我来说似乎太过分了，作为一个彻底的开发人员，我想知道这是怎么回事。基本上我需要知道我应该注意它的价值还是完全无视它。这些是由 LESS/SASS 以编程方式生成的。【参考方案4】：

虽然浏览器可能舍入不同，但实际上不需要 14 位小数，因为最终转换为像素的值可能是相同的，无论使用 14 位还是 3 位小数。

14 位小数的原因很可能是因为开发人员正在使用 css 预处理器（如 less），其中 div 的宽度计算如下width: 100% / @columns;

他们的预处理器可能只是使用它计算的完整浮点数作为实际的 css 值，包括它的所有小数位，而不是截断它们。

【讨论】：

【参考方案5】：

把这个写成其他答案并没有真正使用任何具体的事实或数据。

制作 Sass 必须实际实现此功能的人可能是一个很好的榜样。

node-sass 的默认精度级别是小数点后 5 位，这显然是他们做出的决定，因为 JS 浮点数可以超过 5 位。

https://github.com/sass/node-sass#precision

dart-sass 项目还提到：