CSS的单位系统

CSS的单位系统是样式表设计中不可或缺的一部分，它定义了如何测量和表示长度、角度、时间等属性。不同的单位适用于不同的场景，从绝对尺寸到相对比例，再到动态计算值，它们共同构成了CSS布局和样式的灵活性基础。

绝对单位

绝对单位是固定大小的测量值，不依赖于其他元素的尺寸或屏幕特性。常见的绝对单位包括：

• px（像素）：最常用的单位，1px对应屏幕上的一个物理像素点。

  .box {
    width: 200px; /* 固定宽度为200像素 */
  }
  

• in（英寸）、cm（厘米）、mm（毫米）：基于物理尺寸的单位，但在不同设备上可能因分辨率差异而表现不一致。

  .print-style {
    margin: 1cm; /* 打印样式中的页边距 */
  }
  

• pt（点）：常用于印刷，1pt等于1/72英寸。

  h1 {
    font-size: 24pt; /* 标题字体大小 */
  }
  

绝对单位适合需要精确控制的场景，比如打印样式或固定尺寸的UI元素。

相对单位

相对单位的计算依赖于其他属性或环境变量，能够实现响应式设计。

• em：相对于当前元素的字体大小。

  p {
    font-size: 16px;
    padding: 1em; /* 16px × 1 = 16px */
  }
  

  嵌套时，em会继承父元素的字体大小：

  div {
    font-size: 2em; /* 假设父元素字体为16px，则此处为32px */
  }
  

• rem：相对于根元素（html）的字体大小。

  html {
    font-size: 10px;
  }
  .component {
    width: 20rem; /* 10px × 20 = 200px */
  }
  

• %：相对于父元素的对应属性值。

  .parent {
    width: 500px;
  }
  .child {
    width: 50%; /* 250px */
  }
  

  在transform中，百分比可能相对于元素自身尺寸：

  .box {
    transform: translateX(50%); /* 移动自身宽度的一半 */
  }
  

视口单位

视口单位基于浏览器窗口的尺寸，适合全屏布局或响应式设计。

• vw（视口宽度）：1vw = 视口宽度的1%。

  .header {
    height: 10vw; /* 高度随视口宽度变化 */
  }
  

• vh（视口高度）：1vh = 视口高度的1%。

  .hero-section {
    min-height: 100vh; /* 至少占满整个视口高度 */
  }
  

• vmin和vmax：分别取视口宽度或高度的较小/较大值。

  .responsive-circle {
    width: 50vmin; /* 在移动端横屏时表现更稳定 */
  }
  

动态计算单位

CSS函数允许更复杂的单位计算：

• calc()：混合单位运算。

  .sidebar {
    width: calc(100% - 250px); /* 动态宽度计算 */
  }
  

• min()和max()：限制值的范围。

  .fluid-text {
    font-size: max(12px, 2vw); /* 字体不小于12px */
  }
  

特殊用途单位

• ch：基于字符“0”的宽度，适合等宽字体排版。

  pre {
    width: 80ch; /* 限制代码行宽 */
  }
  

• deg/rad：角度单位，用于旋转或渐变。

  .rotate {
    transform: rotate(45deg);
  }
  

• s/ms：时间单位，用于动画和过渡。

  .fade-in {
    animation: fade 1s ease-in;
  }
  

单位的选择策略

在响应式设计中，通常结合多种单位：

.container {
  width: 90%; /* 相对父元素 */
  max-width: 1200px; /* 绝对限制 */
  padding: 2rem; /* 相对根字体 */
  margin: 0 auto;
}

字体大小推荐使用rem或em保持可访问性，而间距和布局可混合使用vw、%和固定值。