源本科技 | 码上会

logo
源本科技 码上会
一站式数字化转型技能学习平台

CSS 单位

2026/02/11
18
0

学习目标

  • 区分绝对单位与相对单位的核心差异

  • 掌握常用 CSS 单位（如 px、em、rem、vw、% 等）的使用场景

  • 理解响应式设计中单位选择对布局灵活性和可访问性的影响

  • 能根据项目需求合理选用最合适的尺寸单位

正文内容

在 CSS 中，单位用于定义元素的尺寸、间距、字体大小等属性。根据是否随环境变化，CSS 单位分为两大类：绝对单位和相对单位。

绝对单位

绝对单位具有固定物理尺寸，不随屏幕、父元素或用户设置而改变，适用于需要精确控制的场景（如打印样式、图标尺寸等）。

1. 厘米（cm）

1 厘米 = 1/100 米，属于国际单位制（SI）。

<html>
<head>
    <style>
        p {
            font-size: 2cm;
            color: green;
        }
    </style>
</head>
<body>
    <p>欢迎来到技术社区</p>
</body>
</html>

2. 毫米（mm）

1 厘米 = 10 毫米，常用于高精度排版。

<html>
<head>
    <style>
        p {
            font-size: 20mm;
            color: green;
        }
    </style>
</head>
<body>
    <p>欢迎来到技术社区</p>
</body>
</html>

3. 英寸（in）

1 英寸 = 2.54 厘米 = 25.4 毫米，源于英制单位，现已被标准化。

<html>
<head>
    <style>
        p {
            font-size: 0.5in;
            color: green;
        }
    </style>
</head>
<body>
    <p>欢迎来到技术社区</p>
</body>
</html>

4. 像素（px）

最常用的绝对单位，代表屏幕上的一个物理点。1px ≈ 0.26mm（取决于设备 DPI）。

<html>
<head>
    <style>
        p {
            font-size: 40px;
            color: green;
        }
    </style>
</head>
<body>
    <p>你好，开发者！最近怎么样？</p>
</body>
</html>

尽管 px 在技术上是绝对单位，但在现代浏览器中会随系统缩放而调整，具备一定“相对性”。

5. 点（pt）

印刷和排版常用单位，1pt = 1/72 英寸 ≈ 1.33px。

<html>
<head>
    <style>
        p {
            font-size: 50pt;
            color: green;
        }
    </style>
</head>
<body>
    <p>你好，开发者</p>
</body>
</html>

6. 皮卡（pc）

1pc = 12pt = 1/6 英寸 ≈ 15.96px，多用于传统印刷设计。

<html>
<head>
    <style>
        p {
            font-size: 5pc;
            color: green;
        }
    </style>
</head>
<body>
    <p>你好，开发者</p>
</body>
</html>

相对单位

相对单位的值依赖于上下文环境（如父元素、根元素或视口），是实现响应式设计的关键。

1. em

相对于当前元素的父元素字体大小。若无父元素，则基于 <html> 的字体大小。

<html>
<head>
    <style>
        .ok {
            font-size: 20px;
        }
        .para {
            font-size: 2em; /* 2 × 20px = 40px */
        }
    </style>
</head>
<body>
    <div class="ok">
        你好，技术社区
        <div class="para">你好，技术社区</div>
    </div>
</body>
</html>

注意：em 具有继承性，多层嵌套可能导致尺寸“级联放大”。

2. rem（root em）

始终相对于根元素（<html>）的字体大小，避免了 em 的级联问题。

<html>
<head>
    <style>
        html {
            font-size: 25px;
        }
        .para {
            font-size: 2rem; /* 2 × 25px = 50px */
            color: red;
        }
    </style>
</head>
<body>
    <div class="para">你好，技术社区</div>
</body>
</html>

推荐用于全局字体、间距等需要统一缩放的场景。

3. 视口宽度（vw）

1vw = 视口宽度的 1%，随屏幕宽度动态变化。

<html>
<head>
    <style>
        .para {
            height: 10vw;
            width: 50vw;
            border: 2px solid black;
            background-color: chocolate;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div class="para">你好，技术社区</div>
</body>
</html>

在手机上 50vw 可能只有 200px，而在桌面端可达 800px。

4. 视口高度（vh）

1vh = 视口高度的 1%，常用于全屏布局。

<html>
<head>
    <style>
        .full-height {
            height: 100vh;
            background-color: lightblue;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <div class="full-height">
        <h1>此 div 占满整个视口高度（100vh）</h1>
    </div>
</body>
</html>

5. 百分比（%）

相对于父元素的对应尺寸，广泛用于流式布局。

<html>
<head>
    <style>
        .container {
            width: 200px;
            height: 100px;
            background-color: lightgreen;
        }
        .child {
            width: 50%;   /* 100px */
            height: 50%;  /* 50px */
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="child"></div>
    </div>
</body>
</html>

6. vmin

取 vw 和 vh 中的较小值，适合在不同方向屏幕上保持比例一致。

<html>
<head>
    <style>
        div {
            height: 10vmin;
            width: 20vmin;
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

7. vmax

取 vw 和 vh 中的较大值，适用于大屏优先的设计。

<html>
<head>
    <style>
        div {
            height: 2vmax;
            width: 8vmax;
            background-color: cadetblue;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

8. ch

等于当前字体中字符 “0” 的宽度，常用于控制文本容器宽度。

<html>
<head>
    <style>
        .small {
            font-family: monospace;
            font-size: 25px;
            height: 10ch;
            width: 10ch;
            background-color: cornflowerblue;
        }
    </style>
</head>
<body>
    <div class="small">
        你好，技术社区
    </div>
</body>
</html>

9. ex

等于当前字体中字母 “x” 的高度，用于垂直间距微调。

<html>
<head>
    <style>
        .small {
            font-family: monospace;
            font-size: 25px;
            height: 10ex;
            width: 10ex;
            background-color: cornflowerblue;
        }
    </style>
</head>
<body>
    <div class="small">
        你好，技术社区
    </div>
</body>
</html>

10. lh

基于当前元素的行高（line-height），1lh = 当前行高值。

<html>
<head>
    <style>
        .small {
            font-family: sans-serif;
            font-size: 20px;
            line-height: 8;      /* 行高 = 20px × 8 = 160px */
            height: 1lh;         /* 高度 = 160px */
            width: 1lh;          /* 宽度 = 160px */
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div class="small">
        你好，技术社区
    </div>
</body>
</html>

绝对单位 vs 相对单位

对比维度

绝对单位

相对单位

响应性

固定不变，不响应屏幕变化

动态调整，高度响应

依赖关系

独立于父元素和视口

依赖父元素、根元素或视口

跨设备适配

较差，难以适配多端

优秀，天然支持响应式

可访问性

不随用户字体设置缩放

可随浏览器字体偏好调整

典型用途

打印样式、边框、图标

布局、字体、间距、响应式组件

如何选择合适的单位

使用绝对单位的场景

  • 定义固定尺寸的边框（如 border: 1px solid #ccc）

  • 设置图标、徽章等不可缩放的装饰元素

  • 打印样式表（需精确物理尺寸）

使用相对单位的场景

  • rem：全局字体大小、间距系统（配合 CSS 自定义属性更佳）

  • em：局部组件内自适应（如按钮内边距）

  • %：流式容器、弹性布局

  • vw / vh：全屏 hero 区、视口相关动画

  • vmin / vmax：需要在横竖屏保持比例的元素

重点总结

单位类型

推荐使用

避免滥用

绝对单位

px（边框、固定图标）

pt、pc、in（Web 开发中极少用）

相对单位

rem、%、vw、vh

多层嵌套的 em（易失控）

思考题

  1. 为什么在移动端 Web 开发中应尽量避免使用 px 定义字体大小？如何用 rem 实现可缩放的字体系统？

  2. 若将一个元素的宽度设为 100vw，在某些 iOS 设备上可能会出现横向滚动条，原因是什么？如何解决？

  3. 请设计一个响应式卡片组件，其宽度为父容器的 80%，最大不超过 600px，最小不低于 300px，并使用合适的单位实现。