CSS 单位

CSS 单位用于指定长度、角度、时间等数值。掌握 CSS 单位对于创建精确的布局和响应式设计至关重要。

长度单位

绝对单位

绝对单位是固定大小的单位，不会根据其他因素变化。

px（像素）

像素是最常用的绝对单位。

/* 使用像素 */
.box {
  width: 200px;
  height: 100px;
  font-size: 16px;
}

pt（点）

点主要用于打印。

/* 使用点 */
.print {
  font-size: 12pt;
}

cm（厘米）

厘米用于物理尺寸。

/* 使用厘米 */
.physical {
  width: 10cm;
  height: 5cm;
}

mm（毫米）

毫米用于物理尺寸。

/* 使用毫米 */
.physical {
  width: 100mm;
  height: 50mm;
}

in（英寸）

英寸用于物理尺寸。

/* 使用英寸 */
.physical {
  width: 4in;
  height: 2in;
}

相对单位

相对单位是相对于其他元素或视口大小的单位。

em

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

/* 使用 em */
.container {
  font-size: 16px;
}

.child {
  font-size: 1.5em;  /* 24px */
  padding: 1em;      /* 24px */
}

rem

rem 是相对于根元素的字体大小。

/* 使用 rem */
html {
  font-size: 16px;
}

.container {
  font-size: 1.5rem;  /* 24px */
  padding: 1rem;      /* 16px */
}

%（百分比）

百分比是相对于父元素的大小。

/* 使用百分比 */
.container {
  width: 800px;
}

.child {
  width: 50%;  /* 400px */
}

vw

vw 是视口宽度的百分比。

/* 使用 vw */
.full-width {
  width: 100vw;
}

.half-width {
  width: 50vw;
}

vh

vh 是视口高度的百分比。

/* 使用 vh */
.full-height {
  height: 100vh;
}

.half-height {
  height: 50vh;
}

vmin

vmin 是视口宽度和高度中较小值的百分比。

/* 使用 vmin */
.square {
  width: 80vmin;
  height: 80vmin;
}

vmax

vmax 是视口宽度和高度中较大值的百分比。

/* 使用 vmax */
.box {
  width: 80vmax;
  height: 80vmax;
}

角度单位

deg（度）

度是最常用的角度单位。

/* 使用度 */
.rotate {
  transform: rotate(45deg);
}

rad（弧度）

弧度是另一种角度单位。

/* 使用弧度 */
.rotate {
  transform: rotate(0.785rad);  /* 45度 */
}

grad（梯度）

梯度是另一种角度单位。

/* 使用梯度 */
.rotate {
  transform: rotate(50grad);  /* 45度 */
}

turn（圈）

turn 表示完整的圆圈。

/* 使用圈 */
.rotate {
  transform: rotate(0.25turn);  /* 90度 */
}

时间单位

s（秒）

秒是时间单位。

/* 使用秒 */
.animation {
  transition: all 2s ease;
}

ms（毫秒）

毫秒是时间单位。

/* 使用毫秒 */
.animation {
  transition: all 2000ms ease;
}

频率单位

Hz（赫兹）

赫兹是频率单位。

/* 使用赫兹 */
.audio {
  audio-frequency: 1000Hz;
}

kHz（千赫兹）

千赫兹是频率单位。

/* 使用千赫兹 */
.audio {
  audio-frequency: 1kHz;
}

分辨率单位

dpi（每英寸点数）

dpi 是分辨率单位。

/* 使用 dpi */
.print {
  image-resolution: 300dpi;
}

dpcm（每厘米点数）

dpcm 是分辨率单位。

/* 使用 dpcm */
.print {
  image-resolution: 118dpcm;
}

单位的实际应用

响应式字体

/* 使用 rem 创建响应式字体 */
html {
  font-size: 16px;
}

@media (max-width: 768px) {
  html {
    font-size: 14px;
  }
}

h1 {
  font-size: 2rem;
}

p {
  font-size: 1rem;
}

响应式间距

/* 使用 em 创建响应式间距 */
.container {
  font-size: 16px;
}

.card {
  padding: 1em 1.5em;
  margin-bottom: 1em;
}

全屏布局

/* 使用视口单位创建全屏布局 */
.fullscreen {
  width: 100vw;
  height: 100vh;
}

响应式图片

/* 使用百分比创建响应式图片 */
img {
  width: 100%;
  height: auto;
  max-width: 100%;
}

动画效果

/* 使用时间单位创建动画 */
.animation {
  transition: all 0.3s ease;
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

单位的选择

字体大小

/* 推荐 - 使用 rem */
body {
  font-size: 1rem;
}

/* 不推荐 - 使用 px */
body {
  font-size: 16px;
}

间距

/* 推荐 - 使用 em 或 rem */
.card {
  padding: 1rem 1.5rem;
}

/* 不推荐 - 使用 px */
.card {
  padding: 16px 24px;
}

布局宽度

/* 推荐 - 使用百分比或视口单位 */
.container {
  width: 100%;
  max-width: 1200px;
}

/* 不推荐 - 使用固定 px */
.container {
  width: 1200px;
}

单位的最佳实践

1. 使用相对单位创建响应式设计

/* 推荐 - 使用 rem */
.container {
  font-size: 1rem;
  padding: 1rem;
}

/* 不推荐 - 使用 px */
.container {
  font-size: 16px;
  padding: 16px;
}

2. 使用视口单位创建响应式设计

/* 推荐 - 使用视口单位 */
.hero {
  width: 100vw;
  height: 100vh;
}

/* 不推荐 - 使用固定尺寸 */
.hero {
  width: 1920px;
  height: 1080px;
}

3. 合理使用绝对单位

/* 推荐 - 在需要固定尺寸时使用 px */
.border {
  border: 1px solid #ddd;
}

/* 不推荐 - 在需要响应式时使用 px */
.responsive {
  width: 300px;
}

总结

CSS 单位用于指定长度、角度、时间等数值：

1. 长度单位：绝对单位（px、pt、cm、mm、in）和相对单位（em、rem、%、vw、vh、vmin、vmax）
2. 角度单位：deg、rad、grad、turn
3. 时间单位：s、ms
4. 频率单位：Hz、kHz
5. 分辨率单位：dpi、dpcm
6. 单位选择：根据需求选择合适的单位
7. 最佳实践：使用相对单位创建响应式设计

记住以下几点：

• 理解不同单位的特点和应用场景
• 掌握相对单位的使用方法
• 学会创建响应式设计
• 合理使用绝对单位和相对单位
• 遵循单位的最佳实践