使用纯 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;
}
</length></length>

• 语法：''指定属性的类型是长度。
• 继承：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);
}

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

• counter-reset 初始化计数器 h 和 w 并将其值设置为 var(--h) 和 var(--w)。
• 内容：计数器（w）“x”计数器（h）；显示宽度和高度计数器，格式为“宽度 x 高度”。

完毕！

现在您已经纯粹在CSS中实现了屏幕尺寸指示器。

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

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

以上是使用纯 CSS 获取屏幕尺寸的详细内容。更多信息请关注PHP中文网其他相关文章！