使用纯 CSS 获取窗口大小

我们都知道，CSS 曾经是 Web 开发中最具挑战性的部分。然而，如今它变得更加困难了。

你可能难以置信，现在 CSS 可以定义属性、进行计算，甚至直接获取窗口大小！本文将向你展示如何操作。

定义属性

规则@property是 CSS 中的一项新功能，允许开发人员创建自定义属性并设置其类型、继承和初始值。使用此功能，我们可以读取特定值并将其传递给自定义属性。

在下面的例子中，我们定义了两个自定义属性，--w_raw和--h_raw，分别表示窗口的宽度和高度：

@property --w_raw {
  syntax: '<length>';
  inherits: true;
  initial-value: 100vw;
}

@property --h_raw {
  syntax: '<length>';
  inherits: true;
  initial-value: 100vh;
}

• syntax: '<length>'指定属性的类型是长度。
• inherits: true表示该财产可以被继承。
• initial-value将属性的初始值设置为100vw和100vh，即视口的宽度和高度。

移除单位

现在，我们获取了窗口的宽度和高度值，但它们仍然包含单位。如何去除单位，获得纯数值呢？这涉及到数学运算，因此我们需要使用 CSS 中的数学工具：atan2(y, x)和tan()。

• 该atan2(y, x)函数返回从 x 轴到点 (x, y) 的角度（以弧度为单位）。
• 该tan()函数计算给定角度的正切。

结合这些，我们可以得到纯数值。在这里，我们传入var(--w_raw)和1px作为参数，计算宽度的角度，然后将其转换为数字。这样，我们将宽度和高度转换为无单位值，并将它们存储在:root的变量中。

:root {
  --w: tan(atan2(var(--w_raw), 1px));
  --h: tan(atan2(var(--h_raw), 1px));
}

显示数字

现在数值已经存储在 CSS 中了，我们该如何显示它们呢？计数器才是关键！

body::before {
  content: counter(w) 'x' counter(h);
  counter-reset: h var(--h) w var(--w);
}

我们创建一个::before伪元素来body显示CSS内容。

• counter-reset初始化计数器h和w并将它们的值设置为var(--h)和var(--w)。
• content: counter(w) "x" counter(h);显示宽度和高度计数器，格式为“宽度 x 高度”。

完毕！

现在您有一个纯粹用 CSS 实现的窗口大小指示器。

浏览器将实时更新--w并--h显示在页面上。整个过程完全无需 JavaScript。

您可以点击此处尝试在线演示。

参考文献：
Temani Afif - https://css-tip.com/screen-dimension/