常用到尺寸单位

# 1. `px`（像素）

优点：
- 精确控制：px 提供了对字体和元素大小的精确控制，适合需要固定尺寸的设计。
- 一致性：在不同设备和浏览器中，px 的显示效果通常保持一致。
缺点：
- 不适应性：px 是绝对单位，无法根据用户的系统设置（如操作系统的放大比例或浏览器的缩放级别）进行调整，可能影响可访问性。

# 2. `em`（相对单位）

优点：
- 灵活性：em 基于父元素的字体大小，适合需要响应式设计的场合。通过父元素的大小变化，子元素的大小也会自动调整。
- 便于适应：在不同的上下文中可以更灵活地控制字体大小，适合设计复杂的布局。
缺点：
- 计算复杂：在嵌套元素中使用 em 可能导致计算复杂，因为子元素的大小会受父元素的影响，可能会导致意外的样式变化。

# 3. `rem`（根相对单位）

优点：
- 一致性：rem 基于根元素（通常是 <html> 标签）的字体大小，避免了 em 的层叠计算问题。
- 更易于管理：使用 rem 可以简化设计，确保在整个页面中保持一致的字体比例，便于响应式设计。
缺点：
- 依赖根元素：如果根元素的字体大小被设置为不合理的值，可能影响整个文档的布局。

# 4. `%`（百分比）

定义：百分比单位用于相对于其父元素的大小进行计算。
应用
- 常用于设置宽度、高度、字体大小等，能够根据父元素的大小进行动态调整。
- 适合于响应式设计，能够使布局在不同屏幕尺寸上保持适应性。

# 25 `vw` 和 `vh`

定义
- vw（视口宽度）：1 vw 等于视口宽度的 1%。
- vh（视口高度）：1 vh 等于视口高度的 1%。
应用
- 适用于响应式设计，特别是在全屏或全宽布局中，能够根据视口的大小进行动态调整。
- 示例：font-size: 5vw; 会使字体大小根据视口宽度的变化而变化。

# 6. `vmin` 和 `vmax`

定义
- vmin：取视口宽度和高度中较小的值的 1%。
- vmax：取视口宽度和高度中较大的值的 1%。
应用
- 有助于根据屏幕的较小或较大的尺寸自适应调整元素的大小，适合需要保持一致的比例的设计。

# 7. `ch`

定义：ch 是字符单位，表示当前元素字体中数字 “0” 的宽度。
应用
- 常用于布局和排版，特别是在处理文本输入区域很有帮助。可以用来设定输入框的宽度。

# 8. `ex`

定义：ex 是字母 “x”的高度的单位，通常用于与字体相关的设计。
应用
- 由于其相对性，ex 在一些字体中可能会有所不同，因此在实际应用中较少使用。

# 9. `pt`、`cm` 和 `in`

定义
- pt（点）：通常用于打印设计，1pt 等于 1/72 英寸。
- cm（厘米）：用于具体的物理尺寸。
- in（英寸）：用于指定元素的实际物理大小。
应用
- 适用于印刷媒体或需要特定物理尺寸的设计。

" file="units.html" version=1 line-numbers-mode">

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>不同单位示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 20px;
        }
        .example {
            margin-bottom: 20px;
            padding: 10px;
            border: 1px solid #ccc;
        }
        h2 {
            margin-top: 0;
        }
        .px { font-size: 16px; }
        .em { font-size: 1.5em; }
        .rem { font-size: 1.5rem; }
        .percent { font-size: 150%; }
        .vw { font-size: 5vw; }
        .vh { font-size: 5vh; }
        .vmin { font-size: 10vmin; }
        .vmax { font-size: 10vmax; }
        .ch { font-size: 10ch; }
        .ex { font-size: 2ex; }
        .pt { font-size: 12pt; }
        .cm { font-size: 2cm; }
        .in { font-size: 1in; }
    </style>
</head>
<body>
    <h1>不同单位示例</h1>

    <div class="example px">
        <h2>像素 (px)</h2>
        <p><strong>定义：</strong>像素是一种绝对单位，表示在屏幕上显示的一个固定的像素数量。</p>
        <p><strong>使用场景：</strong>适用于需要精确控制元素大小的设计，如图标和按钮等。</p>
        <p>示例：这是一个使用 <code>16px</code> 字体大小的示例。</p>
    </div>

    <div class="example em">
        <h2>相对单位 (em)</h2>
        <p><strong>定义：</strong>相对单位，基于当前元素的字体大小进行计算。</p>
        <p><strong>使用场景：</strong>适合需要响应式设计的场合，如在父元素的基础上动态调整子元素的大小。</p>
        <p>示例：这是一个使用 <code>1.5em</code> 字体大小的示例，字体大小为父元素的 1.5 倍。</p>
    </div>

    <div class="example rem">
        <h2>根相对单位 (rem)</h2>
        <p><strong>定义：</strong>根相对单位，基于根元素（通常是 <code>&lt;html&gt;</code> 标签）的字体大小。</p>
        <p><strong>使用场景：</strong>适合需要保持一致字体比例的响应式设计，避免了 <code>em</code> 的层叠问题。</p>
        <p>示例：这是一个使用 <code>1.5rem</code> 字体大小的示例，字体大小为根元素的 1.5 倍。</p>
    </div>

    <div class="example percent">
        <h2>百分比 (%)</h2>
        <p><strong>定义：</strong>百分比单位相对于其父元素的大小进行计算。</p>
        <p><strong>使用场景：</strong>常用于设置宽度、高度、字体大小等，适用于响应式设计。</p>
        <p>示例：这是一个使用 <code>150%</code> 字体大小的示例，字体大小为父元素的 150%。</p>
    </div>

    <div class="example vw">
        <h2>视口宽度 (vw)</h2>
        <p><strong>定义：</strong>1 <code>vw</code> 等于视口宽度的 1%。</p>
        <p><strong>使用场景：</strong>适用于全屏或全宽布局，根据视口的大小进行动态调整。</p>
        <p>示例：这是一个使用 <code>5vw</code> 字体大小的示例，字体大小为视口宽度的 5%。</p>
    </div>

    <div class="example vh">
        <h2>视口高度 (vh)</h2>
        <p><strong>定义：</strong>1 <code>vh</code> 等于视口高度的 1%。</p>
        <p><strong>使用场景：</strong>适用于需要根据屏幕高度调整的设计。</p>
        <p>示例：这是一个使用 <code>5vh</code> 字体大小的示例，字体大小为视口高度的 5%。</p>
    </div>

    <div class="example vmin">
        <h2>视口最小值 (vmin)</h2>
        <p><strong>定义：</strong><code>vmin</code> 为视口宽度和高度中较小的值的 1%。</p>
        <p><strong>使用场景：</strong>适合需要根据屏幕的较小尺寸自适应调整的设计。</p>
        <p>示例：这是一个使用 <code>10vmin</code> 字体大小的示例，字体大小为视口最小值的 10%。</p>
    </div>

    <div class="example vmax">
        <h2>视口最大值 (vmax)</h2>
        <p><strong>定义：</strong><code>vmax</code> 为视口宽度和高度中较大的值的 1%。</p>
        <p><strong>使用场景：</strong>适合需要根据屏幕的较大尺寸自适应调整的设计。</p>
        <p>示例：这是一个使用 <code>10vmax</code> 字体大小的示例，字体大小为视口最大值的 10%。</p>
    </div>

    <div class="example ch">
        <h2>字符单位 (ch)</h2>
        <p><strong>定义：</strong><code>ch</code> 是字符单位，表示当前元素字体中数字 “0” 的宽度。</p>
        <p><strong>使用场景：</strong>常用于文本输入区域的宽度设置。</p>
        <p>示例：这是一个使用 <code>10ch</code> 字体大小的示例，字体大小为当前字体中数字 “0” 的宽度的 10 倍。</p>
    </div>

    <div class="example ex">
        <h2>字母高度 (ex)</h2>
        <p><strong>定义：</strong><code>ex</code> 是字母 “x”的高度单位。</p>
        <p><strong>使用场景：</strong>在某些特定的排版设计中，根据字母高度调整元素大小。</p>
        <p>示例：这是一个使用 <code>2ex</code> 字体大小的示例，字体大小为字母 “x”的高度的 2 倍。</p>
    </div>

    <div class="example pt">
        <h2>点 (pt)</h2>
        <p><strong>定义：</strong>点是通常用于打印设计的单位，1pt 等于 1/72 英寸。</p>
        <p><strong>使用场景：</strong>适用于印刷媒体或需要特定物理尺寸的设计。</p>
        <p>示例：这是一个使用 <code>12pt</code> 字体大小的示例，通常用于打印。</p>
    </div>

    <div class="example cm">
        <h2>厘米 (cm)</h2>
        <p><strong>定义：</strong>厘米是用于具体的物理尺寸单位。</p>
        <p><strong>使用场景：</strong>适用于需要指定物理尺寸的设计，通常用于打印或设计文档。</p>
        <p>示例：这是一个使用 <code>2cm</code> 字体大小的示例，表示具体的物理尺寸。</p>
    </div>

    <div class="example in">
        <h2>英寸 (in)</h2>
        <p><strong>定义：</strong>英寸是用于指定实际物理大小的单位。</p>
        <p><strong>使用场景：</strong>适用于需要精确物理尺寸的设计，尤其在打印和图形设计中。</p>
        <p>示例：这是一个使用 <code>1in</code> 字体大小的示例，表示具体的物理尺寸。</p>
    </div>

</body>
</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
131

# 说明

结构：该 HTML 文件包含了不同单位的示例，每种单位的使用都通过 CSS 类来控制字体大小。
样式：每个示例被包裹在一个 div 中，增加了边框和间距，以便视觉上区分不同的单位。
响应式：使用 vw、vh、vmin 和 vmax 等单位时，字体大小会根据视口的变化而变化。

在线编辑

上次更新: 2025/02/25, 18:30:54

← 没有设置宽度的元素 background背景色使用→

常用到尺寸单位

# 1. px（像素）

# 2. em（相对单位）

# 3. rem（根相对单位）

# 4. %（百分比）

# 25 vw 和 vh

# 6. vmin 和 vmax

# 7. ch

# 8. ex

# 9. pt、cm 和 in