CSS 类型转换为数字：tan(atan2()) 标量

在当前浏览器的 CSS 实现中，无法按长度类型进行除法；这calc(100vw / 5px)行不通。最终会实现，因为它在规范中，并且如果有足够的支持，可能很快就会实现。但目前，还没有办法根据大小生成标量。

从技术上讲，有一个新兴的例外atan2()。

atan2()接受 2 个参数，实际上是斜率、上升/下降、y 除以 x，atan2(height, width)并返回从斜率底部到顶部的角度。

那么，你知道吗？是两个维度之间的tan(atan2(height, width))标量。<number>

不，我不知道；这是真的吗？

没错...人们可以使用简单的三角函数来缩放各种维度。

真的...？

如果有人愿意的话。

tan(atan2()) 只是一个标量

无需深入研究正常的三角事物；漂亮的图形、地图和几何艺术等。

从根本上来说，tan(atan2())它只是两个维度之间的标量。

在本文中，我将重点介绍身份缩放作为转换为数值的一种手段，但现在有很多方法可以使用它并比较任意两个维度。

屏幕尺寸

许多人想要的一件事是能够通过视口的数字像素宽度（或高度）来找到纵横比或进行其他计算。

我之前用CPU Hack通过二分查找解决了 100% CSS 中的屏幕尺寸问题，但今天我意识到用下面的方法更容易、更快捷tan(atan2())：

100vw 的数字像素值是多少？

应该很简单

:root {
  --px-width: tan(atan2(100vw, 1px));
}

但是 atan2 目前在浏览器中存在大量错误。（混合 vw 和 px 本来是可以工作的）

100在这种情况下，Chrome 会返回，这很奇怪/不受欢迎。

在这种情况下， Firefox 返回0是因为混合单元失败。如果两者均为vw或两者均为px，Firefox 会正确返回100。

对于任意和任意，Safari 似乎总是返回。无论带不带单位，混合或匹配。（编辑：除非你将其包装在 calc() 中）0tan(atan2(Y, X)) Y X

所以现在我们首先需要100vwas ，这在 CSS 中很容易，因为如果你注册一个 var as并将其设置为如下值，NNNpx就会自动发生这种情况<length>--100vw: 100vw

@property --100vw {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}

现在，它在 Chrome 中正如预期的那样运行：

:root {
  --100vw: 100vw;
  --px-width: tan(atan2(var(--100vw), 1px));
}

--px-width是屏幕的宽度，通常是整数

这里是直播，100vh其中也包括一个：

获取字体大小及更多

您可以将同样的思路用于任何容器查询单位、计算包含混合单位的尺寸、找出 rem 的 px 大小，以及任何您想要的操作。只需注册一个长度，设置其值，然后使用 将其转换为数字 px 即可tan(atan2())。

非常简单！可能超级有用。

<time>也适用于

:root::after {
  --ms: tan(atan2(12s + 1ms, 1ms));
  counter-reset: val var(--ms);
  content: "Numeric ms value of 12s + 1ms is: " counter(val);
  /* counter prints 12001 */
}

这些都是数字类型转换恒等标量，现在想想所有可以混合计算的方法很有趣，但是 tan-atan2 还可以做更多很酷的事情，也许以后的文章会讲到〜

三角函数（更新）

使用它时不需要知道其背后的原理，但我私下里对它有几个疑问：

tan( angle )是一个函数，它取一个角度，然后产生一个等于“对角除以邻角”的结果——即直角三角形的高度除以宽度：

atan( ratio )是一个函数，它取高度除以宽度的值并返回角度；的倒数tan()。

atan2( Y, X )是编程语言中 atan() 的改编版，它将高度 (Y) 和宽度 (X) 作为单独的参数，而不是在传递之前将它们相除，然后返回与 atan 相同的结果。

因此，这个技巧在大多数情况下都是有点愚蠢的（这可能也是为什么没有人早点指出这一点的原因），因为我们使用了两个三角函数而不是calc()实现尚无法做到的除法。

atan2( Height, Width )=angle来自上图

tan( angle )=Height / Width来自上图

tan( atan2( Height, Width ) )=Height / Width

@property --MyFullInlineSize {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}
@property --MyEm {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}
div.in-a-container {
  --MyFullInlineSize: 100cqi;
  --MyEm: 1em;
  --MyNumEmsWide: tan(atan2(
    var(--MyFullInlineSize),
    var(--MyEm)
  ));
  --MyNumPxWide: tan(atan2(
    var(--MyFullInlineSize),
    1px
  ));
}

结束

如果你觉得这篇文章有用、有趣，或者很有意思，那我闲暇时也会做！所以，请考虑在网上关注我：

PropJockey.io	CodePen	开发博客	GitHub	乳齿象

和𝕏@Jane0ri

👽💜
// Jane Ori

PS：最近被裁员了，正在找工作！

https://linkedin.com/in/JaneOri

拥有超过 13 年的全栈（主要是 JS）工程工作和咨询经验，为合适的机会做好准备！