文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

不使用 JS 纯 CSS 获取屏幕宽高,你学会了吗?

2024-11-29 19:54

关注

使用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: '';
  inherits: true;
  initial-value: 100vw; 
}

@property --_h {
  syntax: '';
  inherits: true;
  initial-value: 100vh; 
}

3. 数学运算函数

4. 计算屏幕宽高

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

:root {
  --w: tan(atan2(var(--_w), 1px));
  --h: tan(atan2(var(--_h), 1px));
}

5. 使用 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;
}

6. 效果展示

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

图片

7. 总结

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

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

来源:南城大前端内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯