-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathConvert Data Types in CSS.html
130 lines (130 loc) · 4.21 KB
/
Convert Data Types in CSS.html
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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="zh-Hans-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="color-scheme" content="light dark" />
<meta name="theme-color" content="hsl(0, 0%, 96%);" />
<meta
name="theme-color"
media="(prefers-color-scheme: dark)"
content="hsl(0, 0%, 8%);"
/>
<meta name="author" content="鬼影233" />
<meta name="description" content="在 CSS 中进行数据类型转换" />
<meta
name="keywords"
content="CSS, 数据类型, 转换, 数字, 字符串, 长度, counter, @property, tan, atan2"
/>
<meta property="og:title" content="在 CSS 中进行数据类型转换" />
<meta property="og:locale" content="zh_CN" />
<meta
property="og:url"
content="https://gui-ying233.github.io/Nest/Convert%20Data%20Types%20in%20CSS"
/>
<meta property="og:site_name" content="鬼影的基地" />
<meta property="og:description" content="在 CSS 中进行数据类型转换" />
<meta property="og:type" content="article" />
<meta property="article:author" content="鬼影233" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="在 CSS 中进行数据类型转换" />
<link
rel="canonical"
href="https://gui-ying233.github.io/Nest/Convert%20Data%20Types%20in%20CSS"
/>
<link rel="icon" type="image/x-icon" href="src/asset/favicon.ico" />
<link rel="apple-touch-icon" href="src/asset/favicon.ico" />
<title>在 CSS 中进行数据类型转换 - 鬼影的基地</title>
<script async src="src/js/clarity.js"></script>
<script
async
src="https://www.googletagmanager.com/gtag/js?id=G-ZMHY61ZCQE"
></script>
<script async src="src/js/gtag.js"></script>
<script
async
src="https://hm.baidu.com/hm.js?abdce5cc5a81bdfb51506edb4641e824"
></script>
<link rel="stylesheet" href="src/css/base.css" />
<script type="speculationrules">
{ "prerender": [{ "urls": ["."] }] }
</script>
</head>
<body>
<h1>在 CSS 中进行数据类型转换</h1>
<h2>前言</h2>
<p>以下大部分方法的兼容性并不算高。</p>
<h2><code><number></code> → <code><dimension></code></h2>
<p>
最简单的，通过
<code>calc(5 * 1px)</code>
可以将数字转换为任何<code><dimension></code>。
</p>
<h2><code><dimension></code> → <code><number></code></h2>
<p>
第一时间想到的便是相对的
<code>calc(5px / 1px)</code
>，但这样实际上并不能成功。正确的方法是使用
<code>tan(atan2(5px, 1px))</code>。
</p>
<h2><code><integer></code> → <code><string></code></h2>
<pre data-lang="css">
::before {
counter-reset: n 1;
content: counter(n);
}</pre
>
<p>
注意此处的数字如果是直接指定（包括变量）为一个非整数，那其会被设定为
0。但如果是通过计算得到的，则会被隐式转换为整数（四舍五入）。
</p>
<p>而如果需要保留小数部分，可以通过：</p>
<pre data-lang="css">
::before {
--n: calc(pi);
--w: round(down, var(--n));
counter-reset: w var(--w) f calc((var(--n) - var(--w)) * pow(10, 2));
content: counter(w) "." counter(f);
}</pre
>
<p>或者兼容性稍微好一点的：</p>
<pre data-lang="css">
@property --w {
syntax: "<integer>";
inherits: false;
initial-value: 0;
}
::before {
--n: calc(78.8);
--w: calc(var(--n) - 0.5);
--r: 3;
counter-reset: w var(--w) f calc((var(--n) - var(--w)) * pow(10, var(--r)) - 0.5 + pow(10, calc(var(--r) * -1)));
content: counter(w) "." counter(f);
}</pre
>
<h2><code><dimension></code> → <code><dimension></code></h2>
<pre>
@property --d2d {
syntax: "<length>";
inherits: false;
initial-value: 0;
}
::before {
--d2d: calc(1em);
counter-reset: n tan(atan2(var(--d2d), 1px));
content: counter(n);
}</pre
>
<p>通过这种方式，我们可以方便地查看每个元素的字体大小（px）。</p>
<p>
类似地，我们也可以通过
<code>--d2d: calc(100vw);</code> 来查看视口的实时宽度。
</p>
<p>
但似乎这种方式在与上方的小数显示方法一起使用时会出现问题，具体原因不明。
</p>
<footer>
<a href=".">鬼影的基地</a>
</footer>
</body>
</html>