CSS动态获取视口尺寸

说明

今天看到一篇CSS动态获取视口尺寸的文章记录一下

内容

一般获取视口尺寸，都是用JS实现，CSS也可以动态获取，用了反正切函数和正切函数，转换了一下px，代码如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>CSS动态获取视口大小</title>

    <style>

      @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;

      }

    </style>

  </head>

  <body></body>

</html>

结语

比较巧妙，反正我之前没想到过，记录一下