我们都知道，CSS 曾经是 Web 开发中最具挑战性的部分之一。然而，现在它变得更难了。
你可能不敢相信，2024年 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变量的单位
现在，我们已经获得了屏幕的宽度和高度值，但它们仍然包含单位。
如何去除单位以得到纯数字值呢？这是一个数学问题，所以我们需要使用 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变量的数字
现在数值已经存储在 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)。
- content: counter(w) "x" counter(h); 以 "width x height" 的格式显示宽度和高度的计数器。
完整代码
<style>
@property --w_raw {
syntax: "<length>";
inherits: true;
initial-value: 100vw;
}
@property --h_raw {
syntax: "<length>";
inherits: true;
initial-value: 100vh;
}
:root {
--w: tan(atan2(var(--w_raw), 1px));
--h: tan(atan2(var(--h_raw), 1px));
}
html,
body {
margin: 0;
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.indicator {
display: flex;
flex-direction: column;
align-items: center;
font-family: system-ui, sans-serif;
}
.indicator::before {
content: counter(w) "x" counter(h);
counter-reset: h var(--h) w var(--w);
font-size: 3em;
font-weight: 900;
}
</style>
</head>
<body>
<div class="indicator">
<div class="powered-by"></div>
</div>
</body>效果展示：
小结
现在你已经用纯 CSS 实现了一个屏幕尺寸指示器。而且浏览器会实时更新 --w 和 --h 并在页面上显示它们。整个过程完全无需 JavaScript。
欢迎留言评论，大家一起探讨，一起进步～ 欢迎点赞、关注?、转发～
求关注～全年无休日更~ 求关注～