使用纯 CSS 来计算当前窗口的宽高

提示:记录工作中遇到的需求及解决办法

文章目录


前言

在平时我想要计算浏览器窗口的宽度高度的时候,我们会使用 resize 事件去获取,也就是 JavaScript 的方式去获取窗口的宽度高度

今天给大家分享一个使用纯 CSS 就能计算窗口宽度高度的方法


提示:以下是本篇文章正文内容,下面案例可供参考

一、代码

代码如下,我加了注释,大家可以看一下

二、解析

定义自定义属性:

使用 @property 规则来定义 --vw--vh 作为自定义的CSS属性。这些属性将存储视口的宽度 (100vw) 和高度 (100vh) 。通过 syntaxinitial-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" 来分隔它们。

相关推荐
闲不住的李先森5 分钟前
使用Context7:告别AI“幻觉”,让编程助手永远生成最新、可用的代码
前端·ai编程·cursor
西瓜树枝8 分钟前
解决 JS 大整数精度丢失?一文读懂 BigInt 的底层逻辑与实战规则
前端·javascript
刺客_Andy10 分钟前
React 第四十六节 Router中useInRouterContext的使用详细介绍及注意事项
前端·javascript·react.js
刺客_Andy11 分钟前
React 第四十四节Router中 usefetcher的使用详解及注意事项
前端·javascript·react.js
该用户已不存在15 分钟前
我的Python工具箱,不用加班的秘密
前端·后端·python
刺客_Andy15 分钟前
React 第四十五节 Router 中 useHref() Hook的使用详解及注意事项
前端·javascript·react.js
好好好明天会更好20 分钟前
Vue2中页面数据响应的问题
前端·javascript·vue.js
文心快码BaiduComate24 分钟前
新手如何高效使用 Zulu 智能体?从入门到提效全指南
前端·后端
Renounce25 分钟前
【Android】从早期 MVC 到现代 MVVM 的架构变迁
前端
lbr26 分钟前
uniapp封装图片上传组件,使用v-model双向绑定
前端