calc()
显然可以在转换中工作,但这不能:
transform: scale(calc(0.75 + (0.3 - 0.75) * ((100vw - 320px) / (780 - 320))));
这也可以,但是它基本上是相同的公式,只是百分数与小数。仅添加了此内容,这样您就可以在此处看到公式了:
right: calc(30% + (75 - 30) * ((100vw - 320px) / (780 - 320)));
我有一个容器,其宽度为百分比,例如,最大宽度为300px。我希望其中的一个子项始终使用transform:scale()
缩放到父项当前实际宽度的百分比。
为什么我的calc
转换功能不起作用?使用Chrome。
100vw - 320px
可以在最小宽度之间的最大窗口宽度之间进行计算。可以在这里做吗?
答案 0 :(得分:2)
您有两个问题。第一个是关于无比例公式:
calc(0.75 + (0.3 - 0.75) * ((100vw - 320px) / (780 - 320)))
这是无效的,因为您要添加number
(0.75
)和length
((0.3 - 0.75) * ((100vw - 320px) / (780 - 320))
)
在+或-处,检查双方的类型是否相同,或者一侧是
<number>
,另一侧是<integer>
。如果双方是同一类型,请解析为该类型。如果一侧是<number>
,另一侧是<integer>
,请解析为。 ref
第二个问题是,比例尺仅取一个数字,因此您需要更正公式以通过除去任何类型的单位(vw
,px
等将第二部分转换为数字)
基本上,您无法执行此操作,因为您无法将(100vw - 320px)
转换为数字,除非您考虑使用某些JS,因为CSS不是一种编程语言,所以这超出了CSS。即使使用JS,您也需要定义将像素数转换为非像素数的逻辑依据。
在right
中和percentage
中使用相同的公式将可以正常工作,因为:
如果在放置表达式的上下文中接受百分比,并且将百分比定义为相对于
<number>
以外的其他类型,则将<percentage-token>
视为该类型。例如,在width属性中,百分比为<length>
类型。如果在该上下文中<percentage>
的值不与其他任何类型的值兼容,则百分比仅具有<percentage>
类型。如果通常不允许使用百分比代替calc(),则包含百分比的calc()表达式在该上下文中无效。 ref
因此,在这种情况下,百分比可以与right
一起使用,因为我们可以解决它,因此论坛有效,因为最后它类似于A% + Bpx
。