如何解决CSS的calc中使用的最大可用数字是多少? 编辑
标题说明了一切。
我想知道,这是我可以在calc()
算术中在CSS中使用的最大数字。
它与JavaScript中的最大数字相同吗?
当我尝试使用transform时,限制似乎是1e39(在Chrome和transform: translateX()
中)
div span {
display: block;
width: 100px;
height: 100px;
background-color: gold;
}
div:nth-child(1) span {
-webkit-transform: translatex(calc(1e38px * 1e-37));
transform: translatex(calc(1e38px * 1e-37));
}
div:nth-child(2) span {
-webkit-transform: translatex(calc(1e39px * 1e-37));
transform: translatex(calc(1e39px * 1e-37));
}
div:nth-child(3) span {
-webkit-transform: translatex(calc(1e40px * 1e-37));
transform: translatex(calc(1e40px * 1e-37));
}
<div>
<code>transform: translatex(calc(1e38px * 1e-37));</code>
<span></span>
</div>
<div>
<code>transform: translatex(calc(1e39px * 1e-37));</code>
<span></span>
</div>
<div>
<code>transform: translatex(calc(1e40px * 1e-37));</code>
<span></span>
</div>
CSS Values and Units Module Level 3的规范在4.1 Range Restrictions and Range Definition Notation段落中对此进行了说明
属性可以将数值限制在一定范围内。如果该值超出允许范围,则除非另外指定,否则声明无效,必须将其忽略。范围限制可以在CSS类型的范围标记中使用CSS括号内的范围标记[[min,max]]进行标注,该范围标记在Identifier关键字之后的尖括号中,指示介于(包括)min和max之间的封闭范围。例如,
表示0到10之间的一个整数,包括0和10。 注意:CSS值通常不允许开放范围;因此仅使用方括号表示法。
CSS理论上支持所有值类型的无限精度和无限范围;但是实际上,实现的能力是有限的。 UA应该支持合理有用的范围和精度。适当地使用∞或-∞表示理想情况下无限的范围极限。例如,
表示非负长度。 如果未指定范围,则使用括号内的范围表示法或在属性描述中均以[-∞,∞]为准。
注意:在撰写本文时,括号内的范围表示法是新的;因此,在大多数CSS规范中,任何范围限制仅在散文中有所描述。 (例如,“不允许负值”或“负值无效”表示[0,∞]范围。)这不会使它们的绑定性降低。
因此,似乎属性本身应该定义可能值的范围。 因此,这是所有财产中可能出现的最大数目。我可以在其中找到一些属性列表吗?据我了解,这也将取决于浏览器供应商。
您可能会问为什么我想知道这一点?
我想在CSS中使用一种Heaviside函数,该函数应作为开关使用,根据CSS函数{{1}的输入值大于或小于阈值,其结果值为0或1 }
clamp()
如果--switch: clamp(0,(50.000001 - var(--input)) * 1e10,1);
小于var(--switch)
,则0
为var(--input)
;如果大于50
,则1
为50
(如果是50.000001
,则为另一半。
编辑
另一个例子:
上面的开关计算可以用于这样的范围计算
当我使用值1e36
时,它可以在Firefox中使用,但不能使用1e37
.container {
display: -webkit-Box;
display: flex;
}
.Box {
--switch1: clamp(0,(var(--value) - 59.0000001) * 1e36,1);
--switch2: clamp(0,(91.0000001 - var(--value)) * 1e36,1);
--range-switch: clamp(0,var(--switch1) * var(--switch2),1);
width: 50px;
height: 50px;
Box-sizing: border-Box;
background-color: gold;
border: 1px solid;
-webkit-transform: translateY(calc(15px - var(--range-switch) * 15px));
transform: translateY(calc(15px - var(--range-switch) * 15px));
background-color: hsl(calc(100 * var(--range-switch)),100%,50%);
display: -webkit-Box;
display: flex;
text-align: center;
-webkit-Box-align: center;
align-items: center;
-webkit-Box-pack: center;
justify-content: center;
}
<h1>Range switch (CSS only)</h1>
<div class="container">
<div class="Box" style="--value: 50">50</div>
<div class="Box" style="--value: 60">60</div>
<div class="Box" style="--value: 70">70</div>
<div class="Box" style="--value: 80">80</div>
<div class="Box" style="--value: 90">90</div>
<div class="Box" style="--value: 100">100</div>
</div>
解决方法
在不需要使用大量数字的情况下,我会考虑另外一个想法。
我将使用公式max(x - MIN,1/(x - MIN))
如果x > MIN
的结果为正(>0
,并且最大值肯定会大于1
(a * 1/a = 1
,所以一个项大于1或两者都大于等于1),因此结果将被钳位到1
如果x < MIN
的结果将为负数(<0
)并固定为0。
此方法的唯一缺点是x = MIN
的公式未定义,因此请考虑MIN的非常规值(用户难以选择)
.container {
display: -webkit-box;
display: flex;
}
.box {
--switch1: clamp(0,max(var(--value) - 59.9987,1/(var(--value) - 59.9987)),1);
--switch2: clamp(0,max(90.0011 - var(--value),1/(90.0011 - var(--value))),1);
--range-switch: clamp(0,var(--switch1) * var(--switch2),1);
height: 50px;
padding:0 8px;
box-sizing: border-box;
border: 1px solid;
transform: translateY(calc(15px - var(--range-switch) * 15px));
background-color: hsl(calc(100 * var(--range-switch)),100%,50%);
display: flex;
align-items: center;
justify-content: center;
}
.box::before {
content:attr(style);
font-family:monospace;
text-indent:-9ch;
overflow:hidden;
font-size:18px
}
<h1>Range switch (CSS only)</h1>
<div class="container">
<div class="box" style="--value: 50"></div>
<div class="box" style="--value: 59"></div>
<div class="box" style="--value: 59.5"></div>
<div class="box" style="--value: 59.98"></div>
<div class="box" style="--value: 60"></div>
<div class="box" style="--value: 61"></div>
<div class="box" style="--value: 70"></div>
<div class="box" style="--value: 80"></div>
<div class="box" style="--value: 89.8"></div>
<div class="box" style="--value: 90"></div>
<div class="box" style="--value: 90.99"></div>
<div class="box" style="--value: 91"></div>
<div class="box" style="--value: 100"></div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。