我在自己的工作中注意到，当宽度设置为 33.333% 而不是仅 33% 时，3 个流体列可以更好地填充其父元素。在研究各种 CSS 框架（即 bootstrap.css）时，我还注意到它们的列宽指定了 14 位小数！这似乎是过度或聪明......但我不知道哪个。
那么有这么多小数位的价值/好处是什么？根据我收集到的信息，关于您是否应该避免使用小数位或利用小数位存在公开辩论，我想知道我是否应该对此感兴趣，或者只是不担心。
问问题
10127 次
6 回答
11
在某些情况下是必需的。我正在使用 Twitter Bootstrap 的网站上工作，该网站有 6 个 div 延伸整个网站的宽度。如果我只是让每个 16.66% 的宽度在最后留下一个明显的间隙，如果我让宽度 16.67% 一个 div 被推到下面的行。这意味着让 div 填充整个空间，我必须将宽度设置为 16.6667%，这在 Chrome 和 Firefox 中完美运行，但似乎 Safari 和 IE 将小数点四舍五入到 2 位，所以我只剩下一个使用它们时的间隙。所以有时它可能看起来过度，但有时它实际上是需要的。
戴夫
于 2013-01-31T12:11:32.893 回答
7
您可能会争辩说，小数点后 4 位对于当前技术来说是明智的。
使用width: 33.33%3 列就可以了——即使是 4k 屏幕也不会显示间隙（4096px 的 99.99% = 4,095.5px，四舍五入为 4096px，因此没有间隙）
但其他比率可能。
4k 屏幕上的 1 像素是 1/4096 = width: 0.00024%，因此 4 dp 可以保证没有间隙。8k 屏幕也是安全的……事实上，如果您的尺寸精确到 4 dp，则需要 20,000 像素宽的屏幕才有可能出现间隙
…… 浏览器支持允许，当然！有些人已经注意到一些浏览器会截断到 2 dp，破坏运动。
于 2015-10-21T00:38:27.517 回答
3
因为33 ≠ 33.33333.
如果您将一个 3 设置div为 33%，则还有 1% 需要填充。这只是合乎逻辑的。
于 2013-01-16T18:10:26.873 回答
3
尽管浏览器可能舍入不同，但实际上不需要 14 位小数，因为最终转换为像素的值可能是相同的，无论使用 14 位还是 3 位小数。
14 位小数的原因很可能是因为开发人员正在使用 css 预处理器（如 less），其中 div 的宽度计算如下width: 100% / @columns;
他们的预处理器可能只是使用它计算的完整浮点数作为实际的 css 值，包括所有小数位，而不是截断它们。
于 2015-08-26T17:17:03.060 回答
1
把它写成其他答案并没有真正使用任何具体的事实或数据。
制作 Sass 必须实际实现此功能的人可能是一个很好的榜样。
node-sass 的默认精度级别是小数点后 5 位，这显然是他们做出的决定，因为 JS 浮点数可以超过 5 位。
https://github.com/sass/node-sass#precision
dart-sass 项目还提到：
Dart Sass 默认为所有现有浏览器提供足够高的精度，并且使这种可定制性会大大降低代码效率。
5 位小数似乎就足够了，因为浏览器视口通常会达到数千 (<10^4)，并且子像素精度不超过小数点后一位 (<10^(-1))
10^4 / 10^(-1) = 10^5，所以小数点后 5 位应该足够了
于 2019-05-20T01:09:59.220 回答
0
Bootstrap 4.3 使用 6 位小数。这符合 float32 标准。（32 位标准）
于 2019-09-21T09:34:05.307 回答