单位与函数

这一课你将能做到

1. 区分绝对单位和相对单位，知道各自适用场景
2. 熟练使用 px、em、rem、%、vw、vh 六大常用单位
3. 用 calc()、min()、max()、clamp()、var() 写出灵活的响应式样式

为什么要学

单位是 CSS 的「量词」。字号写死 px，在小屏手机就太小；写死 %，嵌套几层就失控。搞懂单位，才能写出既精致又自适应的页面。clamp() 和 calc() 是现代响应式的核心武器。

人话：单位就是尺子——px 是毫米刻度精确但死板，% 是相对爸爸的比例，rem 是相对根节点的「全局比例」，vw/vh 是「看屏幕大小给」。

先建立图像

<style>
    html { font-size: 16px; }
    .px  { font-size: 24px; }
    .em  { font-size: 1.5em;  }   /* 相对父元素 */
    .rem { font-size: 1.5rem; }   /* 相对 html 根元素 */
    .pct { width: 50%; }
    .vw  { width: 30vw; background: #ffe4e1; }
</style>

<div style="font-size: 20px;">
    <p class="px">24px 绝对</p>
    <p class="em">1.5em = 30px（父 20 × 1.5）</p>
    <p class="rem">1.5rem = 24px（根 16 × 1.5）</p>
</div>
<div class="pct">宽 50%（父宽一半）</div>
<div class="vw">宽 30vw（屏幕宽 30%）</div>

跟着做

步骤 1：绝对单位——px

px 是最常用的绝对单位，1px 在普通屏幕上等于 1 个物理像素点（高清屏会被缩放）。

.title { font-size: 32px; }
.card  { width: 300px; border: 1px solid #ddd; }

什么时候用：边框粗细、图标尺寸、精确控场的场景。

步骤 2：相对单位 em

em 相对当前元素或父元素的字体大小：

.parent { font-size: 20px; }
.child  { font-size: 1.5em; }   /* = 20 × 1.5 = 30px */
.child  { padding: 1em; }       /* = 30px（按当前字号算） */

嵌套会滚雪球：1.2em 套三层就是 1.2³ = 1.728 倍，难追踪。

步骤 3：相对单位 rem

rem（root em）只相对 <html> 的字体大小，不会滚雪球：

html    { font-size: 16px; }     /* 默认值 */
h1      { font-size: 2rem; }     /* 32px */
p       { font-size: 1rem; }     /* 16px */
.small  { font-size: 0.875rem; } /* 14px */

工程实践：把 html 设为 62.5%（=10px），之后 1.6rem 就是 16px，心算友好。

步骤 4：百分比 %

相对父元素对应属性的值：

.parent { width: 400px; }
.child  { width: 50%; }       /* = 200px */
.child  { font-size: 150%; }  /* 相对父元素字号 */

坑：height: 50% 要父元素有明确高度才生效。

步骤 5：视口单位 vw / vh

1vw = 视口宽度的 1%， = 视口高度的 1%：