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

Question

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

那么拥有这么多小数位的价值/好处是什么？根据我收集的内容，就是否应该避免使用小数位或利用它们进行公开辩论，我想知道这是否应该引起我的兴趣，或者只是不担心它。

Answer 1

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

戴夫

Answer 2

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

使用width: 33.33%获得3个cols就可以了 - 即使是4k的屏幕也不会显示间隙（40.99px的99.99％= 4,095.5px，最高可达4096px，因此无间隙）

但其他比率可能会。

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

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

Answer 3

因为33 ≠ 33.33333。

如果您将三个div设置为33％，则还需要填写1％。这是合乎逻辑的。

Answer 4

将其写为其他答案实际上并没有使用任何具体事实或数据。

使用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位应该足够

Answer 5

Bootstrap 4.3使用6个小数位。这符合float32标准。 （32位标准）