以前css无法做到实时显示网页屏幕的长度和宽度,但是css3通过@property 实现了,下面是完整的示例代码:
点击查看完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
<title>BFW NEW PAGE</title>
<style>
@property --vh {
syntax: '<length>';
inherits: true;
initial-value: 100vh;
}
@property --vw {
syntax: '<length>';
inherits: true;
initial-value: 100vw;
}
: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;
color: black;
background-color: white;
padding: 10px;
margin: auto;
}
</style>
</head>
<body>
</body>
</html>
网友回复
如何写ai提示词让大模型根据主题生成视频脚本json,然后让Hyperframe渲染出mp4视频?
有哪些字体使用等宽编程代码展示?
如果让演唱会歌迷的上万手机屏幕和闪光灯一起被现场中控控制闪烁?
Midjourney为啥进军医疗领域了?
python如何跟踪足球比赛指定球员全场运动标注打聚光灯合成
如何将linux服务器的文件目录映射到windows电脑磁盘?
Docling 与 MarkItDown 两个库有啥不同?
豆包收费后国产其他ai软件也会跟进收费吗?
JPEG 与 HEIF图片格式区别?
centos7版本太旧无法安装python3.11,如何在docker中运行python3.11?


