当前位置: 首页 > news >正文

不使用 JS 纯 CSS 获取屏幕宽高

前言

在现代前端开发中,获取屏幕的宽度和高度通常依赖于 JavaScript。然而现代 CSS 也可以获取到屏幕的宽高,通过自定义属性(CSS Variables)和一些数学函数来实现这一目标。本文将详细解析如何使用 CSS 的 @property 规则和一些数学运算来获取屏幕的宽高,严格的说是获取视口的宽度和高度。

使用CSS获取屏幕宽高仅是一种实现方式,部分属性和数学函数有一定的兼容性问题,所以线上环境使用需谨慎。首先来了解一些前置知识点:

1. CSS 自定义属性

CSS 自定义属性(也称为 CSS 变量)允许开发者在 CSS 中定义可重用的值。通过使用 var() 函数,可以在样式表的任何地方引用这些变量。自定义属性的定义通常在 :root 选择器中进行,以便在整个文档中使用。

:root {--shadow-hue: 180deg;--spring-duration: 1.33s;--canvas: 220;--bg: hsl(var(--canvas), 15%, 22%);--wgt: 200;
}

2. @property 规则

@property 规则是 CSS 的一项新特性,允许开发者定义自定义属性的语法、继承性和初始值。通过 @property,我们可以指定一个属性的类型和默认值。

在我们的示例中,我们定义了两个自定义属性 --_w --_h,分别表示屏幕的宽度和高度:

@property --_w {syntax: '<length>';inherits: true;initial-value: 100vw; 
}@property --_h {syntax: '<length>';inherits: true;initial-value: 100vh; 
}
  • syntax: ‘length’ 指定了属性的类型为长度。
  • inherits: true 表示该属性可以继承。
  • initial-value 设置了属性的初始值,分别为 100vw 和 100vh,即视口的宽度和高度。

3. 数学运算函数

atan2(y, x) 函数返回从 x 轴到点 (x, y) 的角度(以弧度为单位)。
tan() 函数则计算给定角度的正切值。

4. 计算屏幕宽高

:root 选择器中,我们使用 tan() atan2() 函数来计算屏幕的宽度和高度,在这里我们将 var(–_w) 1px 作为参数传递,计算出宽度的角度。通过这种方式,我们可以将宽度和高度转换为无单位的整数值。

:root {--w: tan(atan2(var(--_w), 1px));--h: tan(atan2(var(--_h), 1px));
}
  1. 使用 counter 显示宽高
    body:before 伪元素中,我们使用 counter 来显示计算出的宽度和高度:
body:before {content: counter(w) "x" counter(h);counter-reset: h var(--h) w var(--w);font-size: 50px;font-family: system-ui, sans-serif;font-weight: 900;position: fixed;inset: 0;width: fit-content;height: fit-content;margin: auto;
}

counter-reset 用于初始化计数器 h w,并将其值设置为 var(–h)var(–w)
content: counter(w) “x” counter(h); 用于显示宽度和高度,格式为 宽度 x 高度。
通过设置 position: fixed inset: 0,我们将内容居中显示在屏幕上。

6. 效果展示

当页面加载时,浏览器会根据视口的实际宽度和高度计算出 –w –h 的值,并在页面上显示出来。整个过程完全不依赖于 JavaScript。

7. 总结

通过使用 CSS 的 @property 规则和数学函数,我们可以在不使用 JavaScript 的情况下获取屏幕的宽度和高度。随着 CSS 规范的不断发展,未来可能会有更多类似的功能,使得前端开发更加灵活和高效。

虽然CSS提供了强大的功能,但在不使用JavaScript的情况下获取屏幕尺寸仍然存在限制,如浏览器兼容问题。CSS自定义属性和计数器可以用于创造性的解决方案,但在某些情况下,JavaScript仍然是必要的。开发者应该根据项目的具体需求和环境来选择最合适的方法。

相关文章:

不使用 JS 纯 CSS 获取屏幕宽高

前言 在现代前端开发中&#xff0c;获取屏幕的宽度和高度通常依赖于 JavaScript。然而现代 CSS 也可以获取到屏幕的宽高&#xff0c;通过自定义属性&#xff08;CSS Variables&#xff09;和一些数学函数来实现这一目标。本文将详细解析如何使用 CSS 的 property 规则和一些数…...

Node.js NativeAddon 构建工具:node-gyp 安装与配置完全指南

Node.js NativeAddon 构建工具&#xff1a;node-gyp 安装与配置完全指南 node-gyp Node.js native addon build tool [这里是图片001] 项目地址: https://gitcode.com/gh_mirrors/no/node-gyp 项目基础介绍及主要编程语言 Node.js NativeAddon 构建工具&#xff08;node-gyp…...

【ARTS】【LeetCode-704】二分查找算法

目录 前言 什么是ARTS&#xff1f; 算法 力扣704题 二分查找 基本思想&#xff1a; 二分查找算法(递归的方式): 经典写法(找单值): 代码分析: 经典写法(找数组即多个返回值) 代码分析 经典题目 题目描述&#xff1a; 官方题解 深入思考 模版一 (相错终止/左闭右闭) 相等返回情形…...

Vue.js 配置路由:基本的路由匹配

Vue.js 配置路由&#xff1a;基本的路由匹配 在 Vue.js 应用中&#xff0c;Vue Router 是官方提供的路由管理器&#xff0c;用于在单页应用&#xff08;SPA&#xff09;中管理不同的视图。通过配置路由&#xff0c;应用可以根据 URL 的变化展示相应的组件。 基本的路由匹配是…...

鸿蒙(HarmonyOS)Json格式转实体对象(2)

下面是一个复杂的json体。 怎么把json转实体类&#xff0c;首先要定义类 import List from ohos.util.List export class InfoModel{msg: stringcars: List<Cars>code: numberpermissions: List<string>roles: List<string>user: User}class Cars{createBy:…...

代码随想录 栈与队列 test 6

239. 滑动窗口最大值 - 力扣&#xff08;LeetCode&#xff09; 每次只取窗口中最大值&#xff0c;这个最大值可能在后面的滑动中保持不变&#xff0c;而比最大值小的值且在最大值之前出现的值没必要保留&#xff0c;因此可以通过单调队列利用这个特性。 这个单调队列具有如下…...

动手学深度学习2025.1.23

一、预备知识 1.数据操作 &#xff08;1&#xff09;数据访问&#xff1a; 一个元素&#xff1a;[1,2] //行下标为1&#xff0c;列下标为2的元素 一行元素&#xff1a;[1,:] //行下标为1的所有元素 一列元素&#xff1a;[:,1] //列下标为1的所有元素 子区域&#xff1a;[…...

生存网络与mlr3proba

在R语言中,mlr3包是一个用于机器学习的强大工具包。它提供了一种简单且灵活的方式来执行超参数调整。 生存网络是一种用于生存分析的模型,常用在医学和生物学领域。生存分析是一种统计方法,用于研究事件发生的时间和相关因素对事件发生的影响。生存网络可以用来预测个体在给…...

C#与AI的共同发展

C#与人工智能(AI)的共同发展反映了编程语言随着技术进步而演变&#xff0c;以适应新的挑战和需要。自2000年微软推出C#以来&#xff0c;这门语言经历了多次迭代&#xff0c;不仅成为了.NET平台的主要编程语言之一&#xff0c;还逐渐成为构建各种类型应用程序的强大工具。随着时…...

2000-2020年各省第二产业增加值数据

2000-2020年各省第二产业增加值数据 1、时间&#xff1a;2000-2020年 2、来源&#xff1a;国家统计局、统计年鉴、各省年鉴 3、指标&#xff1a;行政区划代码、地区、年份、第二产业增加值 4、范围&#xff1a;31省 5、指标解释&#xff1a;第二产业增加值是指在一个国家或…...

【MySQL】 库的操作

欢迎拜访&#xff1a;雾里看山-CSDN博客 本篇主题&#xff1a;【MySQL】 库的操作 发布时间&#xff1a;2025.1.23 隶属专栏&#xff1a;MySQL 目录 库的创建语法使用 编码规则认识编码集查看数据库默认的编码集和校验集查看数据库支持的编码集和校验集指定编码创建数据库验证不…...

docker 启动镜像命令集合

安装rabbitmq 参考地址&#xff1a; https://blog.csdn.net/xxpxxpoo8/article/details/122935994 docker run -it -d --namerabbit-3.8 -v /d/docker/rabbitmq-stomp/conf:/etc/rabbitmq -p 5617:5617 -p 5672:5672 -p 4369:4369 -p 15671:15671 -p 15672:15672 -p 25672:2…...

微信小程序获取位置服务

wx.getLocation({type: gcj02,success(res) {wx.log(定位成功);},fail(err) {wx.log(定位失败, err);wx.showModal({content: 请打开手机和小程序中的定位服务,success: (modRes) > {if (modRes.confirm) {wx.openSetting({success(setRes) {if (setRes.authSetting[scope.u…...

Docker Load后存储的镜像及更改镜像存储目录的方法

Docker Load后存储的镜像及更改镜像存储目录的方法 Docker Load后存储的镜像更改镜像存储目录的方法脚本说明注意事项Docker作为一种开源的应用容器引擎,已经广泛应用于软件开发、测试和生产环境中。通过Docker,开发者可以将应用打包成镜像,轻松地进行分发和运行。而在某些场…...

Langchain本地知识库部署

本地部署(Docker + LangChain + FAISS) 1. 概述 本地部署 LangChain-Chatchat 可以为企业提供高效、安全、可控的 AI 知识库方案。本方案基于 Docker、LangChain 和 FAISS 进行本地化部署,适用于企业内部知识库问答、私有化 AI 应用等场景。 2. 技术选型 2.1 LangChain …...

java基础学习——jdbc基础知识详细介绍

引言 数据的存储 我们在开发 java 程序时&#xff0c;数据都是存储在内存中的&#xff0c;属于临时存储&#xff0c;当程序停止或重启时&#xff0c;内存中的数据就会丢失&#xff0c;我们为了解决数据的长期存储问题&#xff0c;有以下解决方案&#xff1a; 通过 IO流书记&…...

联想电脑怎么设置u盘启动_联想电脑设置u盘启动方法(支持新旧机型)

有很多网友问联想电脑怎么设置u盘启动&#xff0c;联想电脑设置u盘启动的方法有两种&#xff0c;一是通过bios进行设置。二是通过快捷方式启动进入u盘启动。但需要注意有两种引导模式是&#xff0c;一种是uefi引导&#xff0c;一种是传统的leacy引导&#xff0c;所以需要注意制…...

C# 解析 HTML 实战指南

在网页开发和数据处理的场景中&#xff0c;经常需要从 HTML 文档里提取有用的信息。C# 作为一门强大的编程语言&#xff0c;提供了丰富的工具和库来实现 HTML 的解析。这篇博客就带你深入了解如何使用 C# 高效地解析 HTML。 一、为什么要在 C# 中解析 HTML 在实际项目中&…...

光谱相机在智能冰箱的应用原理与优势

食品新鲜度检测 详细可点击查看汇能感知团队实验报告&#xff1a;高光谱成像技术检测食物新鲜度 检测原理&#xff1a;不同新鲜程度的食品&#xff0c;其化学成分和结构会有所不同&#xff0c;在光谱下的反射、吸收等特性也存在差异。例如新鲜肉类和蔬菜中的水分、蛋白质、叶…...

编写0号中断的处理程序

实验内容、程序清单及运行结果 编写0号中断的处理程序&#xff08;课本实验12&#xff09; 解&#xff1a; assume cs:code code segment start: mov ax,cs mov ds,ax mov si,offset do mov ax,0 mov es,ax mov di,200h mov cx,offset doend-offset do ;安装中断例…...

课灵h5p-标签页 (Tabs)教程

标签页 (Tabs)教程 标签页 (Tabs) 是一种高效的内容容器&#xff0c;通过水平切换的选项卡界面来组织信息。它允许你在同一页面空间内并行展示多个同层级的主题&#xff08;如不同类别的资源、不同语言的版本&#xff09;&#xff0c;帮助学习者按需浏览&#xff0c;保持界面整…...

如何实现零配置专业级视频播放体验?mpv_PlayKit配置方案深度解析

如何实现零配置专业级视频播放体验&#xff1f;mpv_PlayKit配置方案深度解析 【免费下载链接】mpv_PlayKit &#x1f504; mpv player 播放器折腾记录 Windows conf | 中文注释配置 汉化文档 快速帮助入门 | mpv-lazy 懒人包 Win11 x64 config | 着色器 shader 滤镜 filter 整合…...

MozJPEG终极指南:如何用开源工具将JPEG压缩效率提升30%以上

MozJPEG终极指南&#xff1a;如何用开源工具将JPEG压缩效率提升30%以上 【免费下载链接】mozjpeg Improved JPEG encoder. 项目地址: https://gitcode.com/gh_mirrors/mo/mozjpeg 在当今图像密集的互联网时代&#xff0c;JPEG格式仍然是网页图片的主流选择&#xff0c;但…...

BNO055传感器IIC地址冲突?手把手教你修改PS引脚配置

BNO055传感器I2C地址冲突解决方案&#xff1a;PS引脚配置实战指南 在机器人、无人机等需要多传感器协同工作的项目中&#xff0c;BNO055作为一款高性能9轴惯性测量单元(IMU)被广泛使用。但当多个BNO055传感器通过I2C总线连接时&#xff0c;默认地址冲突问题常常让开发者头疼不已…...

Winhance-zh_CN:如何免费让你的Windows系统焕然一新

Winhance-zh_CN&#xff1a;如何免费让你的Windows系统焕然一新 【免费下载链接】Winhance-zh_CN A Chinese version of Winhance. C# application designed to optimize and customize your Windows experience. 项目地址: https://gitcode.com/gh_mirrors/wi/Winhance-zh_C…...

从零到一:基于SkyWalking构建微服务可观测性实践

1. 为什么微服务需要可观测性&#xff1f; 记得去年我们团队把一个单体应用拆分成五个微服务后&#xff0c;突然发现线上问题排查变得异常困难。有一次用户反馈订单支付超时&#xff0c;我们花了整整两天时间才定位到是风控服务调用了第三方接口导致的性能瓶颈。这种经历让我深…...

数据仓库进阶:缓慢变化维度(SCD)完全解析

数据仓库进阶&#xff1a;缓慢变化维度&#xff08;SCD&#xff09;完全解析1. 缓慢变化维度概述1.1 什么是SCD&#xff1f;1.2 为什么需要SCD&#xff1f;2. SCD处理流程图3. 常见SCD类型详解3.1 Type 0&#xff1a;保持不变&#xff08;Retain Original&#xff09;3.2 Type …...

PETRV2-BEV模型训练实战:基于星图AI算力平台的完整流程解析

PETRV2-BEV模型训练实战&#xff1a;基于星图AI算力平台的完整流程解析 1. 环境准备与基础配置 1.1 创建并激活conda环境 首先我们需要创建一个专用的conda环境来管理项目依赖。推荐使用Python 3.8版本&#xff1a; conda create -n paddle3d_env python3.8 conda activate…...

3个技巧:如何用开源工具彻底解决Beyond Compare授权难题

3个技巧&#xff1a;如何用开源工具彻底解决Beyond Compare授权难题 【免费下载链接】BCompare_Keygen Keygen for BCompare 5 项目地址: https://gitcode.com/gh_mirrors/bc/BCompare_Keygen 当Beyond Compare 5的30天评估期结束后&#xff0c;用户常常会遇到"评估…...

如何快速打造高效办公界面:Office功能区的终极定制指南

如何快速打造高效办公界面&#xff1a;Office功能区的终极定制指南 【免费下载链接】office-custom-ui-editor 项目地址: https://gitcode.com/gh_mirrors/of/office-custom-ui-editor Office Custom UI Editor 是一款由微软官方开源的强大工具&#xff0c;让您无需编写…...