使用纯 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" 来分隔它们。

相关推荐
2501_915909066 分钟前
HTML5 与 HTTPS,页面能力、必要性、常见问题与实战排查
前端·ios·小程序·https·uni-app·iphone·html5
white-persist1 小时前
Python实例方法与Python类的构造方法全解析
开发语言·前端·python·原型模式
新中地GIS开发老师2 小时前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
Superxpang2 小时前
前端性能优化
前端·javascript·vue.js·性能优化
Rysxt_2 小时前
Element Plus 入门教程:从零开始构建 Vue 3 界面
前端·javascript·vue.js
隐含2 小时前
对于el-table中自定义表头中添加el-popover会弹出两个的解决方案,分别针对固定列和非固定列来隐藏最后一个浮框。
前端·javascript·vue.js
大鱼前端2 小时前
Turbopack vs Webpack vs Vite:前端构建工具三分天下,谁将胜出?
前端·webpack·turbopack
你的人类朋友2 小时前
先用js快速开发,后续引入ts是否是一个好的实践?
前端·javascript·后端
知识分享小能手2 小时前
微信小程序入门学习教程,从入门到精通,微信小程序核心 API 详解与案例(13)
前端·javascript·学习·react.js·微信小程序·小程序·vue