课七：CSS中的单位及应用 - 在线演示
相对单位、绝对单位、视口单位实时效果展示与对比
1. 相对单位演示（em/rem/%）
em单位（相对于当前元素字体大小）
父元素字体大小：16px（默认）
font-size: 1em = 16px
font-size: 1.5em = 24px
font-size: 2em = 32px
父元素字体大小：20px（自定义）
font-size: 1em = 20px
rem单位（相对于根元素字体大小）
根元素字体大小：16px（默认）
font-size: 1rem = 16px
font-size: 1.5rem = 24px
font-size: 2rem = 32px
%百分比单位（相对于父元素）
父元素：width=400px, height=100px
width: 50%（200px）, height: 80%（80px）
2. 绝对单位演示（px/in/cm/pt）
px单位（最常用绝对单位）
font-size: 16px（默认文本大小）
font-size: 20px
width: 200px, height: 50px
其他绝对单位对比
| 单位 | 示例效果 | 等价px值（近似） | 应用场景 |
|---|---|---|---|
| in（英寸） | 96px | 印刷设计 | |
| cm（厘米） | 37.8px | 印刷设计 | |
| pt（点） | font-size: 12pt |
16px | 文档排版 |
3. 视口单位演示（vw/vh/vmin/vmax）
← → 拖动浏览器窗口改变大小，观察下方元素变化
vw/vh单位（相对于视口宽高）
width: 50vw（视口宽度的50%）, height: 10vh（视口高度的10%）
font-size: 3vw（视口宽度的3%）
vmin/vmax单位（相对于视口最小/最大尺寸）
20vmin（正方形响应式元素）
10vmax
4. 多单位结合响应式演示
响应式卡片布局（rem + % + px + vw）
5. 单位应用场景对比
| 应用场景 | 推荐单位 | 示例代码 | 优势 |
|---|---|---|---|
| 响应式字体大小 | rem | font-size: 1.2rem; | 全局统一控制，适配不同设备 |
| 局部间距/内边距 | em | padding: 0.8em; | 与当前文本大小关联，比例协调 |
| 容器宽度比例 | % | width: 80%; | 相对于父元素，自适应布局 |
| 全屏banner/布局 | vw/vh | height: 80vh; | 基于视口尺寸，完美适配屏幕 |
| 边框/圆角/图标 | px | border: 1px; border-radius: 4px; | 精确控制，显示一致 |
| 印刷设计/文档 | pt/in/cm | font-size: 12pt; | 匹配物理尺寸，印刷效果一致 |