为什么这个 calc() 函数在变换比例下不起作用？答案

【问题标题】：Why does this calc() function not work in transform scale?为什么这个 calc() 函数在变换比例下不起作用？
【发布时间】：2019-05-11 19:08:43
【问题描述】：

calc() 显然可以在转换中使用，但这不是：

transform: scale(calc(0.75 + (0.3 - 0.75) * ((100vw - 320px) / (780 - 320))));

另外，这可行，但它基本上是相同的公式，只有百分比与小数。仅添加了此内容，以便您可以在此处查看公式：

right: calc(30% + (75 - 30) * ((100vw - 320px) / (780 - 320)));

例如，我有一个宽度为百分比的容器，最大宽度为 300 像素。我希望它的一个子级始终使用transform:scale() 缩放到父级实际当前宽度的百分比。

为什么我的转换calc 函数不起作用？使用 Chrome。

100vw - 320px 用于计算窗口宽度的最小和最大尺寸。这里可以吗？

【问题讨论】：

刻度不需要任何单位，只需要数字
那么 vw 和 px 呢？它们是单位...顺便说一下整个公式无效，您不能用单位添加数字
可以做到，但不是在你的公式中使用(100vw - 300px)，你需要使用一个包装器并给它那个宽度。现在，您放置在此包装器中的任何孩子都将从100% 开始，即上面的calc(100vw - 300px)。提供一个实际示例，我将向您展示实现您想要的实际解决方案。如果没有minimal reproducible example，您的问题也不是无法回答的，对未来的用户也没有用处，这是在Stack Overflow 上回答问题的主要标准。详情请阅读How to Ask。
@AndreiGheorghiu 会在我们有时间的时候做。谢谢。
@AndreiGheorghiu 是的，如果我们知道 期望的结果，因为这显然是一个 XY 问题，并且是一种错误的方法来实现使用其他技术可以轻松实现的目标。

标签： css css-transforms css-calc

【解决方案1】：

你有两个问题。第一个是关于没有比例的公式：

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。即使使用 JS，您也需要定义将像素数转换为非像素数的逻辑。

在right 和percentage 中使用相同的公式可以正常工作，因为：

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

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

【讨论】：