【第3362期】不使用 JS 纯 CSS 获取屏幕宽高

主要观点总结

文章介绍了如何使用纯CSS技术获取屏幕宽度和高度的方法，包括CSS自定义属性、@property规则和数学函数的使用。文章还详细解释了这些技术的实现原理，并提供了完整的CSS代码示例。

关键观点总结

关键观点1: CSS自定义属性（CSS Variables）

允许开发者在CSS中定义可重用的值，通过var()函数在样式表中引用这些变量。

关键观点2: @property规则

允许开发者定义自定义属性的语法、继承性和初始值。

关键观点3: 数学运算函数

如atan2和tan函数，用于计算角度和正切值。

关键观点4: 获取屏幕宽高的方法

通过使用@property规则和数学函数，在不依赖JavaScript的情况下获取屏幕的宽度和高度。

关键观点5: CSS计数器的使用

通过counter来显示计算出的宽度和高度。

文章预览

前言 介绍了如何使用纯 CSS 技术，特别是 CSS 自定义属性、@property 规则以及数学函数，来获取屏幕的宽度和高度，而不依赖于 JavaScript。今日前端早读课文章由 @南城分享，公号：南城大前端授权。 正文从这开始～～ 在现代前端开发中，获取屏幕的宽度和高度通常依赖于 JavaScript。然而现代 CSS 也可以获取到屏幕的宽高，通过自定义属性（CSS Variables）和一些数学函数来实现这一目标。本文将详细解析如何使用 CSS 的  @property  规则和一些数学运算来获取屏幕的宽高，严格的说是获取视口的宽度和高度。 【第2143期】CSS变量对JS交互组件开发带来的提升与变革 使用 CSS 获取屏幕宽高仅是一种实现方式，部分属性和数学函数有一定的兼容性问题，所以线上环境使用需谨慎。首先来了解一些前置知识点： 1. CSS 自定义属性 CSS 自定义属性（也称为 CSS 变量） ………………………………