纯CSS动态显示屏幕宽高

然而现代 css 也可以获取到屏幕的宽高，通过自定义属性和一些数学函数来实现这一目标。

源码

<style>
:root {
	--shadow-hue: 180deg;
	--spring-duration: 1.33s;
	--canvas: 220;
	--bg: hsl(var(--canvas), 15%, 22%);
	--wgt: 200;
}
@property --_w {
	syntax: '<length>';
	inherits: true;
	initial-value: 100vw;
}
@property --_h {
	syntax: '<length>';
	inherits: true;
	initial-value: 100vh;
}
:root {
	--w: tan(atan2(var(--_w), 1px));
	--h: tan(atan2(var(--_h), 1px));
}
.box: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;
	margin: auto;
}
.box {
	padding: 50px 0;
	width: 100%;
	background: #f1f2f3;
	text-align: center;
}
</style>
<div class="box"></div>

代码说明：

1、自定义属性的定义通常在:root选择器中进行，以便在整个文档中使用。

2、@property规则是CSS的一项新特性，允许开发者定义自定义属性的语法、继承性和初始值。通过@property，我们可以指定一个属性的类型和默认值。

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

3、数学运算函数atan2(y, x) 函数返回从 x 轴到点 (x, y) 的角度（以弧度为单位）; tan() 函数则计算给定角度的正切值。

4、计算屏幕宽高,在:root选择器中，我们使用tan()和atan2()函数来计算屏幕的宽度和高度，在这里我们将var(--_w)和1px作为参数传递，计算出宽度的角度。通过这种方式，我们可以将宽度和高度转换为无单位的整数值。

5、在.box:before伪元素中，我们使用 counter 来显示计算出的宽度和高度：

counter-reset 用于初始化计数器 h 和 w，并将其值设置为 var(--h) 和 var(--w)。
content: counter(w) "x" counter(h); 用于显示宽度和高度，格式为 宽度 x 高度。

链接: https://fly63.com/course/33_2071