编辑“︁CSS单位”︁

= CSS单位 =

'''CSS单位'''（CSS Units）是用于定义CSS属性值的度量标准，用于指定长度、大小、间距、角度、时间等数值的单位。在网页设计中，正确使用单位可以确保布局的灵活性和响应性。CSS单位主要分为'''绝对单位'''和'''相对单位'''两大类。

== 绝对单位 ==
绝对单位是固定大小的单位，不会因设备或上下文环境的变化而改变。常见的绝对单位包括：

* '''px'''（像素）：1px 等于屏幕上的一个物理像素点。
* '''in'''（英寸）：1in = 96px（在标准屏幕分辨率下）。
* '''cm'''（厘米）：1cm ≈ 37.8px。
* '''mm'''（毫米）：1mm ≈ 3.78px。
* '''pt'''（点）：1pt = 1/72in ≈ 1.33px。
* '''pc'''（派卡）：1pc = 12pt ≈ 16px。

=== 示例代码 ===
<syntaxhighlight lang="css">
/* 使用绝对单位定义元素尺寸 */
.box {
    width: 300px;      /* 宽度为300像素 */
    height: 2in;       /* 高度为2英寸 */
    padding: 10mm;     /* 内边距为10毫米 */
    font-size: 14pt;   /* 字体大小为14点 */
}
</syntaxhighlight>

== 相对单位 ==
相对单位的值是相对于另一个参考值计算的，因此更适合响应式设计。常见的相对单位包括：

* '''em'''：相对于当前元素的字体大小（1em = 当前字体大小）。
* '''rem'''：相对于根元素（<html>）的字体大小。
* '''%'''：相对于父元素的对应属性值（如宽度、高度）。
* '''vw'''（视口宽度单位）：1vw = 视口宽度的1%。
* '''vh'''（视口高度单位）：1vh = 视口高度的1%。
* '''vmin'''：视口宽度或高度的较小值的1%。
* '''vmax'''：视口宽度或高度的较大值的1%。

=== 示例代码 ===
<syntaxhighlight lang="css">
/* 使用相对单位定义元素尺寸 */
.container {
    font-size: 16px;
    width: 80%;        /* 宽度为父元素的80% */
}

.child {
    font-size: 1.5em;   /* 字体大小为父元素的1.5倍（24px） */
    margin: 2rem;       /* 外边距为根元素字体大小的2倍（32px，假设根字体大小为16px） */
    height: 50vh;       /* 高度为视口高度的50% */
}
</syntaxhighlight>

== 实际应用场景 ==
=== 响应式布局 ===
使用相对单位（如<code>rem</code>、<code>vw</code>、<code>%</code>）可以轻松实现响应式设计，使页面在不同设备上自适应。

=== 字体大小调整 ===
<code>em</code>和<code>rem</code>常用于定义字体大小，确保文本在不同屏幕尺寸下保持一致的比例。

=== 视口单位应用 ===
<code>vw</code>和<code>vh</code>适合用于全屏元素（如背景、横幅）的尺寸定义。

== 单位换算关系 ==
以下是一些常见单位的换算关系（假设屏幕分辨率为96dpi）：
<mermaid>
pie
    title CSS单位换算（96dpi）
    "1in" : 96
    "1cm" : 37.8
    "1mm" : 3.78
    "1pt" : 1.33
    "1pc" : 16
</mermaid>

== 数学公式 ==
在某些情况下，可能需要计算单位之间的转换。例如：
<math>1\,\text{in} = 96\,\text{px}</math>
<math>1\,\text{rem} = \text{根字体大小（默认16px）}</math>

== 总结 ==
* 绝对单位（如<code>px</code>、<code>in</code>）适合固定尺寸的场景。
* 相对单位（如<code>em</code>、<code>rem</code>、<code>vw</code>）适合响应式设计。
* 选择合适的单位可以提高代码的可维护性和页面的适应性。

通过合理使用CSS单位，开发者可以创建灵活、可扩展的网页布局，适应不同设备和用户需求。

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS基础]]