不使用 JS 纯 CSS 获取屏幕宽高
引言：CSS 如何获取屏幕宽高
在现代前端开发中，获取屏幕宽度和高度通常依赖于 JavaScript。然而，现代 CSS 也可以实现这一目标，通过自定义属性（CSS Variables）和一些数学函数，尽管这种方法仍存在一定的兼容性问题。在本文中，我们将详细探讨如何使用 CSS 的 @property 规则和数学运算来获取视口的宽度和高度。
1. CSS 自定义属性
CSS 自定义属性（也称为 CSS 变量）允许开发者在 CSS 中定义可重用的值。通过 var() 函数，可以在样式表的任何地方引用这些变量。通常，自定义属性在 :root 选择器中定义，以便在整个文档中使用。
:root {
--shadow-hue: 180deg;
--spring-duration: 1.33s;
--canvas: 220;
--bg: hsl(var(--canvas), 15%, 22%);
--wgt: 200;
}
2. @property 规则
@property 规则是 CSS 的一项新特性，允许开发者定义自定义属性的语法、继承性和初始值。通过 @property，我们可以指定一个属性的类型和默认值。
在我们的示例中，定义了两个自定义属性 --_w 和 --_h，分别表示屏幕的宽度和高度：
@property --_w {
syntax: '<length>';
inherits: true;
initial-value: 100vw;
}
@property --_h {
syntax: '<length>';
inherits: true;
initial-value: 100vh;
}
syntax: '<length>'指定了属性的类型为长度。inherits: true表示该属性可以继承。initial-value设置了属性的初始值，分别为100vw和100vh，即视口的宽度和高度。
3. 数学运算函数
CSS 还提供了一些数学运算函数，如 atan2(y, x) 和 tan()，可以用于计算角度和正切值。通过这些函数，可以将宽度和高度转换为无单位的整数值：
:root {
--w: tan(atan2(var(--_w), 1px));
--h: tan(atan2(var(--_h), 1px));
}
4. 使用 counter 显示宽高
在 body:before 伪元素中，我们可以使用 counter 来显示计算出的宽度和高度：
body:before {
content: counter(w) "x" counter(h);
counter-reset: h var(--h) w var(--w);
font-size: 50px;
font-family: system-ui, sans-serif;
font-weight: 900;
position: fixed;
inset: 0;
width: fit-content;
height: fit-content;
margin: auto;
}
counter-reset用于初始化计数器h和w，并将其值设置为var(--h)和var(--w)。content: counter(w) "x" counter(h);用于显示宽度和高度，格式为 "宽度 x 高度"。
5. 效果展示
当页面加载时，浏览器将根据视口的实际宽度和高度计算出 --w 和 --h 的值，并在页面上显示出来。整个过程完全不依赖于 JavaScript。
6. 总结
通过使用 CSS 的 @property 规则和数学函数，我们可以在不使用 JavaScript 的情况下获取屏幕的宽度和高度。随着 CSS 规范的不断发展，未来可能会有更多类似的功能，使得前端开发更加灵活和高效。
虽然 CSS 提供了强大的功能，但在不使用 JavaScript 的情况下获取屏幕尺寸仍存在限制，如浏览器兼容问题。开发者应根据项目的具体需求和环境，选择最合适的方法。