文章目录

CSS3单位权威指南：从基础到高级应用

目录

  1. 长度单位
  2. 角度单位
  3. 时间单位
  4. 频率单位
  5. 分辨率单位
  6. 布局单位
  7. 总结

长度单位

绝对长度单位

px (像素)
  • 定义：CSS像素，相对于显示设备的分辨率
  • 使用：最常用的固定单位
  • 代码示例：
.box {
  width: 200px;
  height: 150px;
  font-size: 16px;
}
  • 注意事项：在高DPI设备上，浏览器会自动进行缩放处理
cm (厘米)
  • 定义：实际物理厘米
  • 使用：打印样式表
  • 代码示例：
@media print {
  .page {
    width: 21cm;
    height: 29.7cm;
  }
}
  • 注意事项：屏幕显示效果因设备而异
mm (毫米)
  • 定义：实际物理毫米
  • 使用：打印样式表
  • 代码示例：
@media print {
  .margin {
    margin: 10mm;
  }
}
in (英寸)
  • 定义：实际物理英寸(1in = 96px = 2.54cm)
  • 使用：打印样式表
  • 代码示例：
@media print {
  .photo {
    width: 4in;
    height: 6in;
  }
}
pt (点)
  • 定义：印刷单位(1pt = 1/72in)
  • 使用：字体大小，打印样式
  • 代码示例：
.print-text {
  font-size: 12pt;
  line-height: 14pt;
}
pc (派卡)
  • 定义：印刷单位(1pc = 12pt)
  • 使用：印刷排版
  • 代码示例：
.print-layout {
  column-width: 30pc;
}

相对长度单位

em
  • 定义：相对于当前元素的字体大小
  • 使用：响应式布局，字体相关属性
  • 代码示例：
.container {
  font-size: 16px;
}

.container .child {
  /* 16px * 1.5 = 24px */
  font-size: 1.5em;
  /* 24px * 2 = 48px */
  padding: 2em;
}
  • 注意事项：em单位会继承父元素的字体大小，容易产生复合效果
rem
  • 定义：相对于根元素(html)的字体大小
  • 使用：响应式布局，统一的比例控制
  • 代码示例：
<style>
  html {
    font-size: 16px; /* 1rem = 16px */
  }
  
  .box {
    /* 16px * 2 = 32px */
    width: 2rem;
    /* 16px * 1.5 = 24px */
    font-size: 1.5rem;
  }
</style>
  • 注意事项：推荐使用rem进行整体布局，避免复合继承问题
%
  • 定义：相对于父元素的相应属性
  • 使用：流体布局，响应式设计
  • 代码示例：
.parent {
  width: 800px;
}

.child {
  /* 800px * 50% = 400px */
  width: 50%;
  /* 相对于自身字体大小的百分比 */
  line-height: 150%;
}
  • 注意事项：百分比单位的具体含义取决于所使用的属性
vw (视口宽度)
  • 定义：相对于视口宽度的1%
  • 使用：响应式布局，全屏元素
  • 代码示例：
.full-width {
  /* 视口宽度的50% */
  width: 50vw;
}

.hero-section {
  /* 视口高度的100% */
  height: 100vh;
}
vh (视口高度)
  • 定义：相对于视口高度的1%
  • 使用：全屏布局，垂直居中
  • 代码示例：
.modal {
  height: 80vh;
  width: 60vw;
  position: fixed;
  top: 10vh;
  left: 20vw;
}
vmin
  • 定义：视口宽度和高度中较小值的1%
  • 使用：确保元素在不同设备上都能显示
  • 代码示例：
.square {
  /* 在竖屏：相对于高度，横屏：相对于宽度 */
  width: 50vmin;
  height: 50vmin;
}
vmax
  • 定义：视口宽度和高度中较大值的1%
  • 使用：大尺寸元素布局
  • 代码示例：
.large-element {
  /* 总是使用视口较大尺寸的百分比 */
  font-size: 5vmax;
}
ex
  • 定义：当前字体的小写字母"x"的高度
  • 使用：垂直对齐，字体相关设计
  • 代码示例：
.vertical-rhythm {
  margin-bottom: 1ex;
}
ch
  • 定义：数字"0"的宽度
  • 使用：字符限制布局，等宽设计
  • 代码示例：
.code-input {
  /* 限制为80个字符宽度 */
  width: 80ch;
}

.monospace-layout {
  font-family: monospace;
  width: 60ch;
}

角度单位

deg (度)

  • 定义：角度，完整圆为360deg
  • 使用：变换，渐变，动画
  • 代码示例：
.rotated {
  transform: rotate(45deg);
}

.gradient {
  background: linear-gradient(90deg, red, blue);
}

rad (弧度)

  • 定义：弧度，完整圆为2π rad
  • 使用：数学计算，高级变换
  • 代码示例：
.circle-part {
  /* 90度 = π/2 ≈ 1.57rad */
  transform: rotate(1.57rad);
}

grad (百分度)

  • 定义：直角为100grad，完整圆为400grad
  • 使用：专业设计，印刷
  • 代码示例：
.special-rotation {
  transform: rotate(100grad);
}

turn (圈)

  • 定义：完整圆为1turn
  • 使用：动画，旋转效果
  • 代码示例：
.spinning {
  animation: spin 2s infinite linear;
}

@keyframes spin {
  from { transform: rotate(0turn); }
  to { transform: rotate(1turn); }
}

时间单位

s (秒)

  • 定义：时间单位秒
  • 使用：动画，过渡
  • 代码示例：
.fade-in {
  transition: opacity 0.5s ease-in-out;
  animation: slide 2s forwards;
}

ms (毫秒)

  • 定义：时间单位毫秒(1s = 1000ms)
  • 使用：快速动画，微交互
  • 代码示例：
.quick-transition {
  transition: all 300ms ease;
}

.delayed-appear {
  animation-delay: 500ms;
}

频率单位

Hz (赫兹)

  • 定义：频率单位
  • 使用：语音媒体，可访问性
  • 代码示例：
@media speech {
  .announcement {
    pitch: 120Hz;
  }
}

kHz (千赫兹)

  • 定义：千赫兹(1kHz = 1000Hz)
  • 使用：语音媒体
  • 代码示例：
@media speech {
  .low-pitch {
    pitch: 0.5kHz;
  }
}

分辨率单位

dpi (每英寸点数)

  • 定义：每英寸点数
  • 使用：高分辨率媒体查询
  • 代码示例：
@media (min-resolution: 300dpi) {
  .high-res-image {
    background-image: url('image@2x.png');
  }
}

dpcm (每厘米点数)

  • 定义：每厘米点数(1dpcm ≈ 2.54dpi)
  • 使用：公制分辨率查询
  • 代码示例：
@media (min-resolution: 118dpcm) {
  /* 相当于300dpi */
  .print-optimized {
    display: block;
  }
}

dppx (每像素单位点数)

  • 定义：每CSS像素的设备像素数
  • 使用：响应式图像，视网膜显示
  • 代码示例：
@media (min-resolution: 2dppx) {
  .retina-ready {
    background-image: url('image@2x.jpg');
  }
}

布局单位

fr (分数单位)

  • 定义：CSS Grid布局中的分数单位
  • 使用：网格布局分配剩余空间
  • 代码示例：
.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  /* 创建三列，比例为1:2:1 */
}

.complex-grid {
  display: grid;
  grid-template-columns: 200px 1fr 2fr;
  /* 第一列固定200px，剩余空间按1:2分配 */
}

实际应用示例

响应式布局综合示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS单位综合示例</title>
  <style>
    /* 基础设置 */
    :root {
      font-size: 16px;
    }
    
    /* 响应式容器 */
    .container {
      width: 90vw;
      max-width: 1200px;
      margin: 0 auto;
      padding: 2rem;
    }
    
    /* 网格布局 */
    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 1.5rem;
    }
    
    /* 卡片组件 */
    .card {
      background: white;
      border-radius: 0.5rem;
      padding: 1.5rem;
      box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.1);
      transition: transform 0.3s ease;
    }
    
    .card:hover {
      transform: translateY(-0.5rem);
    }
    
    /* 响应式字体 */
    .responsive-heading {
      font-size: clamp(1.5rem, 4vw, 3rem);
      margin-bottom: 1rem;
    }
    
    .responsive-text {
      font-size: clamp(1rem, 2vw, 1.25rem);
      line-height: 1.6;
    }
    
    /* 全屏英雄区域 */
    .hero {
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      text-align: center;
    }
  </style>
</head>
<body>
  <section class="hero">
    <div class="container">
      <h1 class="responsive-heading">CSS单位综合应用</h1>
      <p class="responsive-text">展示各种CSS单位的实际应用场景</p>
    </div>
  </section>
  
  <div class="container">
    <div class="grid">
      <div class="card">
        <h3>响应式设计</h3>
        <p>使用vw、rem和百分比单位创建适应不同屏幕的布局</p>
      </div>
      <div class="card">
        <h3>网格布局</h3>
        <p>使用fr单位创建灵活的网格系统</p>
      </div>
      <div class="card">
        <h3>动画效果</h3>
        <p>使用deg和turn单位创建旋转动画</p>
      </div>
    </div>
  </div>
</body>
</html>

总结

单位选择指南

  1. 布局与间距：优先使用rem、%、vw/vh
  2. 字体大小：使用rem为主，em用于特定情境
  3. 响应式设计：结合vw/vh与媒体查询
  4. 网格布局：使用fr单位分配空间
  5. 动画变换：使用deg、turn和s/ms单位
  6. 打印样式：使用pt、cm、mm等物理单位

最佳实践

  1. 设置根字体大小：
html {
  font-size: 16px; /* 或62.5% (10px) 便于计算 */
}
  1. 使用clamp()函数实现响应式字体：
.text {
  font-size: clamp(1rem, 2.5vw, 2rem);
}
  1. CSS自定义属性结合单位：
:root {
  --spacing-unit: 1rem;
  --container-width: min(90vw, 1200px);
}

.container {
  width: var(--container-width);
  padding: calc(var(--spacing-unit) * 2);
}

通过合理选择和组合不同的CSS单位，可以创建出灵活、响应式且易于维护的网页设计。

# css3 # css # 前端
Logo
码道开发者社区

码道开发者社区，聚焦华为云码道 CodeArts 代码智能体，沉淀 Agent、Skill、鸿蒙开发实战内容，供开发者查阅资料、交流技术、分享工程实践

更多推荐

cover

AI 已经能直接改设计稿了:Windows部署Penpot，接入Codex MCP实测

avatar 码道开发者社区

【AI 业务流架构师】AI 业务流架构师方法论：Agentic AI 范式转移与业务编排思维

2026 年，Anthropic CEO Dario Amodei 在 Code with Claude 大会上的一个判断广为流传：一个人运营一家十亿美元级公司的概率是 70%–80%。这句话听起来像科幻小说的设定，但它背后是一个正在发生的结构性变化——AI 把"执行"的成本压到了历史低点，同时把"编排"的价值推到了前台。这意味着我们需要一套新的思考框架，来回答两个问题：一个人如何拥有一个公司的产

avatar 码道开发者社区
cover

Codex CLI实战 从一句模糊需求到可执行可测试可验收的开发任务把“帮我优化一下”变成 Codex 能执行、团队能复核、测试能证明的工程任务

avatar 码道开发者社区