为什么此calc函数在转换比例下不起作用?

时间:2018-12-10 20:31:45

标签: css css3 css-calc

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可以在最小宽度之间的最大窗口宽度之间进行计算。可以在这里做吗?

1 个答案:

答案 0 :(得分:2)

您有两个问题。第一个是关于无比例公式:

calc(0.75 + (0.3 - 0.75) * ((100vw - 320px) / (780 - 320)))

这是无效的,因为您要添加number0.75)和length(0.3 - 0.75) * ((100vw - 320px) / (780 - 320))

  

在+或-处,检查双方的类型是否相同,或者一侧是<number>,另一侧是<integer>。如果双方是同一类型,请解析为该类型。如果一侧是<number>,另一侧是<integer>,请解析为。 ref

第二个问题是,比例尺仅取一个数字,因此您需要更正公式以通过除去任何类型的单位(vwpx等将第二部分转换为数字)

基本上,您无法执行此操作,因为您无法将(100vw - 320px)转换为数字,除非您考虑使用某些JS,因为CSS不是一种编程语言,所以这超出了CSS。即使使用JS,您也需要定义将像素数转换为非像素数的逻辑依据。


right中和percentage中使用相同的公式将可以正常工作,因为:

  

如果在放置表达式的上下文中接受百分比,并且将百分比定义为相对于<number>以外的其他类型,则将<percentage-token>视为该类型。例如,在width属性中,百分比为<length>类型。如果在该上下文中<percentage>的值不与其他任何类型的值兼容,则百分比仅具有<percentage>类型。如果通常不允许使用百分比代替calc(),则包含百分比的calc()表达式在该上下文中无效。 ref

因此,在这种情况下,百分比可以与right一起使用,因为我们可以解决它,因此论坛有效,因为最后它类似于A% + Bpx