css - 更少的百分比不能正常工作

Question

我正在尝试以 2 位精度在 lesscss 文件中获取百分比。在lesscss文件中

@w: round(((100-((12-5)*3.8))/(12/5))*100);
width: percentage(@w/10000);

编译为宽度：30.580000000000002%；我做错了什么？

我的逻辑非常简单：
第1步：获得“不正确”数字30.580000000000002
步骤2：30 = 3058.0000000000/302
步骤3 ：
roup
30.58

Answer 1

您没有考虑浮点计算是以二进制形式完成的，其中没有 1/10000 的精确表示。所以：

/* 30.580000000000002 */
console.log(Math.round(((100 - ((12 - 5) * 3.8))/(12 / 5)) * 100) / 10000 * 100);

（LESS 是否使用像 JavaScript 这样的 ECMAScript 实现并不重要，只要计算基于IEEE-754双精度浮点数。）

但是，您不应该为此烦恼。

width: 30.580000000000002%;

是完全有效的 CSS。

Answer 2

您需要将方法包装在round()方法周围percentage()，如下所示：

@w: round(((100-((12-5)*3.8))/(12/5))*100);
width: round(percentage(@w/10000));

Answer 3

在尝试最小化数据流量时，您的问题可能很重要。如今，通过网络发送尾数中超过一两个数字的 CSS 百分比是没有意义的。

给定以下 LESS 输入：

w: 100 %;
w: round(512 * 1%, 2);
w: 2.0 / 3.0 * 100 * 1%;
w: round(2.0 / 3.0 * 100 * 1%, 2);
w: round(0.19%, 2);
w: round(0.19%, 1);
w: round(10000%, 1);
w: round(10000, 1);

和相应的输出：

w: 100 %;
w: 512%;
w: 66.66666666666666%;
w: 66.67%;
w: 0.19%;
w: 0.2%;
w: 10000%;
w: 10000;

我们看到round(percentage, 2)非破坏性地实现了我们想要的。