背景
先看一个问题:如何动态获取屏幕视口尺寸的大小,显示在页面上。
效果如下:
1. 使用js方式
正常我们的做法是使用js处理,这很简单。
如下所示:
window.addEventListener("resize", (e) => {
console.log('窗口宽度:', e.target.innerWidth, '窗口高度:', e.target.innerHeight);
});
如果只是这样,那就没有意思了。
下面介绍一种方式:使用css就可以动态检测屏幕视口尺寸。
2. 使用css方式
这里我们废话不多说,直接上代码,具体如下:
/* 默认转换成px */
@property --vw {
syntax: "<length>";
inherits: true;
initial-value: 100vw;
}
@property --vh {
syntax: "<length>";
inherits: true;
initial-value: 100vh;
}
:root {
--w: tan(atan2(var(--vw), 1px));
--h: tan(atan2(var(--vh), 1px));
}
body::before {
content: counter(w) "x" counter(h);
counter-reset: w var(--w) h var(--h);
font-size: 150px;
font-weight: 900;
position: fixed;
inset: 0;
width: fit-content;
height: fit-content;
margin: auto;
}
暂一看,一头雾水。这里我们先说一下具体的实现思路:
- 利用CSS的
@property
规则来定义自定义属性(CSS变量),通过这些变量自动计算得到视口宽度和高度(vw
和vh
)的值,注意这里得到的单位是px
- 使用三角函数
tan
和反三角函数atan2
进行计算去除px单位,得到对应的值 - 通过
couter-reset
CSS 计数器,将其初始化,在content中使用counter进行显示计数器的值。
每一步的具体说明如下:
2.1 自定义属性定义
@property
允许开发者显示的定义CSS
属性,这些属性允许进行类型检查,以及设置默认值,定义之后的属性,可以直接在css
中使用,也可以在JavaScript
中使用。
具体语法:
// 自定义属性的名称,必须以`--`开头
@property --name {
// 自定义属性的类型
syntax: <type> | <type> [ <type> ]*;
// 是否继承父元素的属性值
inherits: true | false;
// 自定义属性的默认值
initial-value: <value>;
}
通过上述说明我们可以定义出视口宽高的自定义属性 :
@property --vw {
syntax: "<length>";
inherits: true;
initial-value: 100vw;
}
@property --vh {
syntax: "<length>";
inherits: true;
initial-value: 100vh;
}
2.2 :root
中使用tan和atan2计算自定义属性
- atan2
atan2()
为三角函数,返回介于-infinity
和infinity
之间的两值的反正切值。此函数接受两个参数,返回表示介于-180deg
和180deg
之间的<angle>
的弧度数。
- tan
:root {
--w: tan(atan2(var(--vw), 1px));
--h: tan(atan2(var(--vh), 1px));
}
先看一张图:
先使用atan2
计算--vw
值与1像素的比值的反正切值(即角度α),使用tan
再对这个角度取正切,得到一个数值,表示比例值,因为是对1px
的比例,所以得到的数值就是vh
的高度值。
通过:root
变量--w
和--h
进行自定义属性,提供给后面使用。
3. 使用counter-reset和counter进行显示
- counter-reset
- counter
body::before {
content: counter(w) "x" counter(h);
counter-reset: w var(--w) h var(--h);
font-size: 150px;
font-weight: 900;
position: fixed;
inset: 0;
width: fit-content;
height: fit-content;
margin: auto;
}
使用counter-reset: w var(--w) h var(--h);
:重置w
和h
计数器的值为--w
和--h
,content: counter(w) "x" counter(h);
:显示w
和h
的计数值。
总结
最后总结一下:这段css代码实现通过自定义属性和一些三角函数运算(atan2
和tan
)来计算视口宽度和高度的值,并将这些计算结果使用计数器方式显示出来。通过css进行实现会让人眼前一亮的感觉,算是一种额外的思路。
如有错误,请指正O^O!