当前位置: 首页 > 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 ;安装中断例…...

Ostrakon-VL-8B部署指南:快速搭建支持图片问答的智能系统

Ostrakon-VL-8B部署指南&#xff1a;快速搭建支持图片问答的智能系统 1. 系统概述 Ostrakon-VL-8B是一款专为零售和餐饮场景优化的多模态视觉理解系统。它能像人类一样"看懂"图片内容&#xff0c;并回答与图片相关的各种问题。 这个系统基于Qwen3-VL-8B模型微调而…...

MySQL 8.0隐藏技能:不用.frm文件,用Go语言工具+ALTER TABLE命令直接解析.ibd恢复表结构

MySQL 8.0数据恢复新思路&#xff1a;用Go语言逆向解析.ibd文件的技术实践 当数据库遭遇灾难性故障时&#xff0c;.frm文件的消失让MySQL 8.0的数据恢复变得更具挑战性。本文将带你深入InnoDB存储引擎的核心&#xff0c;探索一种不依赖传统.frm文件的全新恢复方案。 1. MySQL 8…...

Pikachu靶场实战:File Inclusion漏洞从入门到精通(附防御代码)

Pikachu靶场实战&#xff1a;File Inclusion漏洞攻防全解析 在网络安全领域&#xff0c;文件包含漏洞&#xff08;File Inclusion&#xff09;一直是Web应用渗透测试中的高频发现项。这种看似简单的漏洞类型&#xff0c;却能导致服务器敏感信息泄露甚至完全沦陷。Pikachu靶场作…...

AI 创作者指南:附录工具包

📦 附录工具包 “工具不是答案,但能让你更快找到答案。” 第五部分压轴刚聊完“人类永远有护城河”,你现在从灵感到商业化、从伦理到未来,全链路都打通了,是不是心里满满的成就感?😊 来,重头戏到了——📦 附录工具包! 这可是我给你准备的“创作百宝箱”,全都是现…...

Phi-4-Reasoning-Vision镜像使用指南:双卡负载均衡与CUDA内存优化技巧

Phi-4-Reasoning-Vision镜像使用指南&#xff1a;双卡负载均衡与CUDA内存优化技巧 1. 工具概述 Phi-4-Reasoning-Vision是基于微软Phi-4-reasoning-vision-15B多模态大模型开发的高性能推理工具&#xff0c;专为双卡4090环境优化设计。这个工具能够充分发挥15B大模型的深度推…...

高效管理Git仓库:彻底排除node_modules的实用指南

1. 为什么必须排除node_modules文件夹 每次新建Node.js项目时&#xff0c;npm或yarn都会自动生成node_modules目录来存放依赖包。这个文件夹通常包含成千上万个文件&#xff0c;比如一个基础Vue项目就可能超过200MB。我曾见过一个企业级项目的node_modules膨胀到1.2GB&#xff…...

Ubuntu 20.04 下 LVI-SAM 复现全记录:从 gtsam 版本踩坑到 OpenCV 头文件修改

Ubuntu 20.04 下 LVI-SAM 复现实战&#xff1a;从 gtsam 版本适配到 OpenCV 接口升级全解析 在机器人感知与定位领域&#xff0c;LVI-SAM 作为融合激光雷达与视觉信息的 SLAM 系统&#xff0c;因其优异的实时性和鲁棒性备受关注。然而其复杂的依赖环境配置常常让开发者陷入&quo…...

VVC/VTM编码分析进阶:如何利用DecoderAnalyserApp深度解读CU划分与语法元素

VVC/VTM编码分析进阶&#xff1a;如何利用DecoderAnalyserApp深度解读CU划分与语法元素 在视频编码领域&#xff0c;VVC&#xff08;Versatile Video Coding&#xff09;作为新一代标准&#xff0c;其编码效率相比前代HEVC有显著提升。而VTM&#xff08;VVC Test Model&#xf…...

Ubuntu20.04下QGroundControl开发环境搭建全攻略(含常见错误解决方案)

Ubuntu 20.04下QGroundControl开发环境搭建全攻略&#xff08;含常见错误解决方案&#xff09; 在无人机和机器人开发领域&#xff0c;QGroundControl作为一款开源的飞行控制地面站软件&#xff0c;已经成为开发者不可或缺的工具。本文将带你从零开始&#xff0c;在Ubuntu 20.0…...

OpenClaw技能市场巡礼:Top5适合Phi-3-vision-128k-instruct的图文处理插件

OpenClaw技能市场巡礼&#xff1a;Top5适合Phi-3-vision-128k-instruct的图文处理插件 1. 为什么需要为多模态模型搭配专用技能&#xff1f; 去年我在尝试用OpenClaw处理一批产品截图时&#xff0c;发现一个有趣现象&#xff1a;当我把图片直接丢给普通文本模型时&#xff0c…...