前言
大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心~
在平时我想要计算浏览器窗口的宽度高度的时候，我们会使用 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"来分隔它们。
结语
我是林三心，一个待过小型toG型外包公司、大型外包公司、小公司、潜力型创业公司、大公司的作死型前端选手
