单位使用规范

单位使用规范

CSS中的单位选择直接影响布局的精确性与响应式效果。错误的单位使用可能导致元素尺寸失控、文本缩放异常或媒体查询失效。合理运用绝对单位、相对单位及视口单位能确保跨设备兼容性。

绝对单位的使用场景

绝对单位适合需要固定尺寸的场景。px是最常见的绝对单位，1px等于屏幕上的一个物理像素点。打印样式表中应优先使用pt（1pt=1/72英寸）或cm/mm等物理单位。

/* 打印样式示例 */
@media print {
  .page {
    width: 210mm; /* A4纸宽度 */
    padding: 20pt;
    font-size: 12pt;
  }
}

注意：

• 边框宽度推荐始终使用px
• 屏幕媒体查询应使用px而非em/rem
• 高精度需求（如阴影偏移）使用px

相对单位的核心应用

em单位的级联计算

em基于当前元素的字体大小计算，具有级联特性。嵌套元素中使用时需特别注意计算基数：

.article {
  font-size: 16px;
  padding: 2em; /* 32px */
}

.article .section {
  font-size: 0.8em; /* 12.8px */
  margin: 1em; /* 基于12.8px计算 */
}

rem单位的全局控制

rem始终相对于根元素(html)的字体大小，适合构建可缩放的模块系统：

html {
  font-size: 62.5%; /* 10px/16px */
}

.component {
  width: 24rem; /* 240px */
  font-size: 1.4rem; /* 14px */
}

响应式调整时只需修改根字体大小：

@media (min-width: 1200px) {
  html {
    font-size: 75%; /* 12px基准 */
  }
}

视口单位的动态适配

视口单位适用于全屏布局元素：

• vw/vh：视口宽度/高度的1%
• vmin/vmax：取vw/vh中的较小/较大值

.hero-banner {
  height: 100vh;
  padding: 5vmin; /* 保证留白在不同方向都适配 */
}

.font-responsive {
  font-size: calc(1rem + 1vw); /* 基础大小+动态调整 */
}

注意事项：

• 避免单独使用vh，移动浏览器地址栏会影响计算
• 结合calc()实现弹性尺寸
• 在@media查询中使用vmin适配方形区域

百分比单位的特殊行为

百分比单位的表现随属性不同而变化：

.container {
  width: 80%; /* 相对于父级宽度 */
  padding-top: 50%; /* 相对于自身宽度（创建比例容器） */
  font-size: 120%; /* 相对于继承的字体大小 */
}

/* 比例容器示例 */
.aspect-ratio-box {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9比例 */
}

.aspect-ratio-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

无单位数值的适用情况

以下属性允许无单位值：

.line-height {
  line-height: 1.5; /* 字体大小的1.5倍 */
}

.flex-grow {
  flex-grow: 2; /* 弹性扩展系数 */
}

.grid-template {
  grid-template-columns: repeat(3, 1fr); /* 分数单位 */
}

单位组合策略

混合单位实现弹性布局

.card {
  width: min(90vw, 600px); /* 不超过600px的响应式宽度 */
  margin: 2rem clamp(1rem, 5vw, 3rem);
}

/* 流体排版技术 */
:root {
  --min-font: 16px;
  --max-font: 22px;
  --scaler: 5vw;
}
.headline {
  font-size: clamp(
    var(--min-font),
    calc(var(--min-font) + var(--scaler)),
    var(--max-font)
  );
}

自定义属性的单位继承

:root {
  --base-spacing: 1rem;
  --large-spacing: calc(var(--base-spacing) * 2);
}

.module {
  padding: var(--base-spacing);
}

.module-large {
  padding: var(--large-spacing);
}

单位转换的注意事项

使用calc()时需保持单位一致性：

/* 正确做法 */
.spacing {
  margin: calc(1rem + 2px); /* 混合单位需明确标注 */
}

/* 错误示例 */
.invalid {
  width: calc(100% - 20); /* 缺少单位 */
}

媒体查询中的单位选择

媒体查询应始终使用px单位：

/* 推荐 */
@media (min-width: 768px) and (max-width: 1024px) {
  .container {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

/* 不推荐在媒体查询中使用em */
@media (min-width: 48em) {
  /* 计算依赖根字体大小可能产生意外结果 */
}

动画与变换的单位

位移变换推荐使用px与%组合：

.slide-in {
  transform: translateX(calc(100% + 20px));
}

.zoom-effect {
  transform: scale(1.2) translateY(30px);
}

时间单位应明确指定：

.transition {
  transition: transform 300ms ease-in-out;
}

.animation {
  animation: slide 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

颜色单位的选用规范

• RGB/RGBA：用于透明度控制
• HSL/HSLA：适合程序化颜色调整
• HEX：简洁的静态颜色表示

:root {
  --primary-rgb: 34, 139, 230;
  --primary-hsl: 206, 80%, 52%;
}

.button {
  color: #228BE6;
  background-color: rgba(var(--primary-rgb), 0.1);
  border-color: hsl(var(--primary-hsl));
}

单位选择的性能影响

• vw/vh单位会触发布局重计算
• %单位在复杂嵌套中增加样式计算成本
• 复合变换（translate+scale）优于修改width/height

/* 性能优化示例 */
.optimized {
  /* 避免 */
  width: calc(100% - 20px);
  
  /* 推荐 */
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
}

单位与设计系统的整合

建立单位换算基准：

/* 设计系统基础 */
:root {
  --base-unit: 8px;
  --space-xs: calc(var(--base-unit) * 0.5); /* 4px */
  --space-sm: var(--base-unit); /* 8px */
  --space-md: calc(var(--base-unit) * 2); /* 16px */
}

/* 使用示例 */
.form-item {
  margin-bottom: var(--space-md);
  padding: var(--space-sm) var(--space-md);
}