提示：记录工作中遇到的需求及解决办法
文章目录
- 前言
- 一、代码
- 二、解析
- 定义自定义属性：
- 计算 `--w` 和 `--h` ：
- 展示计算结果：
前言
在平时我想要计算浏览器窗口的宽度高度的时候，我们会使用 resize 事件去获取，也就是 JavaScript 的方式去获取窗口的宽度高度
今天给大家分享一个使用纯 CSS 就能计算窗口宽度高度的方法
提示：以下是本篇文章正文内容，下面案例可供参考
一、代码
代码如下，我加了注释，大家可以看一下
二、解析
定义自定义属性：
使用 @property 规则来定义 --vw 和 --vh 作为自定义的CSS属性。这些属性将存储视口的宽度 （100vw） 和高度 （100vh） 。通过 syntax 和 initial-value ，我们确保这些属性的值始终符合 <length> 类型，并且有一个初始值。
计算 --w 和 --h ：
在:root中，使用tan(atan2())函数计算视口宽度和高度的切线值。atan2(var(–vw), 1px)是一个数学函数，计算角度值，tan() 然后应用于这些角度。最终，这些计算结果存储在–w和–h变量中。
展示计算结果：
使用 body::before 伪元素来展示 --w 和 --h 的计算结果。counter-reset 用来设置计数器的初始值为 var(--w) 和 var(--h) ，然后 content 使用 counter() 函数显示这些值。此处显示的是宽度和高度的计算值，中间有一个 "x" 来分隔它们。