有什么方法可以在 CSS 中“投射”单位？答案

【问题标题】：Any way to "cast" units in CSS?有什么方法可以在 CSS 中“投射”单位？
【发布时间】：2019-10-14 09:39:25
【问题描述】：

我正在尝试根据屏幕宽度更改 CSS 中的元素旋转。比如：

transform: rotate(calc(30deg / 100vw / 1000px));

显然，长度算术返回<length>，长度除度是非法的。另一方面，calc(30deg / 2) 工作正常。是否有任何 CSS 技巧可以将长度“投射”到<number>？目前我宁愿避免使用 JavaScript。

【问题讨论】：

不，没有办法仅仅因为没有将deg与px或vw分开的逻辑结果......例如10deg/10px的结果应该是什么？跨度>
@AnnaAvina 读一读 quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html 它不会回答你的问题，但可能会阐明为什么你不能按像素分割
@TemaniAfif 公平地说，vw 必须在某些时候转换为像素，才能呈现页面。浏览器可以在渲染过程中的某个时间点进行计算并非不可想象。也就是说，就渲染过程的性能而言，允许人们进行这些计算并不总是一个好主意。例如，如果是(100vw + 1000px)；每次计算屏幕宽度时，都会设置为宽 1000px，您必须再次重新计算 100vw...
@HereticMonkey 这就是我们需要定义关系的原因。实际上，您正在将vw 转换为一个像素，并且您可能认为将一个像素值除以另一个会得到一个数字，然后我们可以使用这个数字来划分度数。我可以通过将 px 转换为 vw 来做同样的想法，然后进行除法以获得另一个数字。不幸的是 CSS 无法做到这一点.. @anna 我很确定你最终想要实现的目标可以通过这个复杂的计算来完成，你能分享你正在尝试做的事情吗？
我认为答案是否定的，无论该答案的技术（或逻辑）推理如何 :)。

标签： css units-of-measurement css-calc

【解决方案1】：

好像没有。

https://drafts.csswg.org/css-values-3/#calc-notation

如果兼容，则类型解析如下所述（为简单起见，以下忽略运算符的优先规则）：

在+ 或-，检查双方是否具有相同的类型，或者一侧是a 而另一侧是<integer>。如果双方是同一类型，则解析为该类型。如果一侧是<number>，另一侧是<integer>，则解析为<number>。

在*，检查至少一侧是<number>。如果双方都是<integer>，则解析为<integer>。否则，解析为对方的类型。

在/，检查右侧是否为<number>。如果左侧是<integer>，则解析为<number>。否则，解析为左侧的类型。

注意：代数简化不影响calc() 表达式或其解析类型的有效性。例如，calc(5px - 5px + 10s) 和 calc(0 * 5px + 10s) 由于尝试添加长度和时间而无效。

另外，https://www.w3.org/TR/css-values-4/#calc-type-checking

【讨论】：

您能在需要的地方分享您的用例吗？我看到很多情况下人们试图考虑浏览器的宽度来调整角度或其他值，最后我们找到了一种不同的方法来解决这个问题而无需任何计算