CSS长度单位分类
绝对单位
px- 像素pt- 点（印刷单位）pc- 派卡in- 英寸cm- 厘米mm- 毫米
相对单位
em- 相对于父元素字体大小rem- 相对于根元素字体大小%- 百分比vw/vh- 视口宽度/高度vmin/vmax- 视口最小/最大尺寸ex- 相对于字符”x”的高度ch- 相对于字符”0”的宽度
主要单位详解
1. px（像素）
.element {
width: 200px; /* 固定200像素 */
font-size: 16px; /* 固定16像素字体 */
margin: 10px; /* 固定10像素边距 */
}
/* 特点：
✅ 精确控制
✅ 易于理解
❌ 不响应用户字体设置
❌ 在高DPI屏幕上可能显示过小
*/2. em（相对于父元素字体大小）
.parent {
font-size: 20px;
}
.child {
font-size: 1.2em; /* 20px × 1.2 = 24px */
margin: 0.5em; /* 24px × 0.5 = 12px（基于自身字体大小）*/
padding: 1em; /* 24px × 1 = 24px */
}
/* em的嵌套问题 */
.level1 {
font-size: 1.2em; /* 假设父元素16px，这里是19.2px */
}
.level1 .level2 {
font-size: 1.2em; /* 19.2px × 1.2 = 23.04px */
}
.level1 .level2 .level3 {
font-size: 1.2em; /* 23.04px × 1.2 = 27.65px（复合增长）*/
}3. rem（相对于根元素字体大小）
/* 设置根元素字体大小 */
html {
font-size: 16px; /* 基准大小 */
}
.element {
font-size: 1.5rem; /* 16px × 1.5 = 24px */
margin: 2rem; /* 16px × 2 = 32px */
padding: 0.5rem; /* 16px × 0.5 = 8px */
}
/* rem不会复合增长 */
.level1 {
font-size: 1.2rem; /* 始终是 16px × 1.2 = 19.2px */
}
.level1 .level2 {
font-size: 1.2rem; /* 仍然是 16px × 1.2 = 19.2px */
}4. 百分比（%）
.container {
width: 800px;
height: 600px;
font-size: 20px;
}
.child {
width: 50%; /* 800px × 50% = 400px */
height: 25%; /* 600px × 25% = 150px */
font-size: 120%; /* 20px × 120% = 24px */
/* 不同属性参考不同的基准 */
margin-top: 10%; /* 参考父元素的宽度：800px × 10% = 80px */
padding-top: 10%; /* 也参考父元素的宽度：800px × 10% = 80px */
}5. 视口单位（vw, vh, vmin, vmax）
.viewport-demo {
/* 视口宽度单位 */
width: 50vw; /* 视口宽度的50% */
/* 视口高度单位 */
height: 100vh; /* 视口高度的100%（全屏高度）*/
/* 视口最小尺寸 */
font-size: 4vmin; /* min(4vw, 4vh) */
/* 视口最大尺寸 */
line-height: 6vmax; /* max(6vw, 6vh) */
}
/* 响应式字体示例 */
.responsive-title {
font-size: calc(2rem + 2vw); /* 基础2rem + 响应式2vw */
}实际应用场景对比
1. 响应式设计
/* 使用rem的响应式设计 */
html {
font-size: 16px;
}
@media (max-width: 768px) {
html {
font-size: 14px; /* 小屏幕缩小基准字体 */
}
}
.card {
padding: 1rem; /* 会随着基准字体缩放 */
margin: 0.5rem;
font-size: 1.2rem;
}
/* 使用vw的响应式字体 */
.hero-title {
font-size: calc(1.5rem + 3vw); /* 基础大小 + 视口响应 */
min-font-size: 1.2rem; /* 最小字体大小 */
max-font-size: 3rem; /* 最大字体大小 */
}2. 组件设计
/* 按钮组件 - 使用em实现内部比例一致 */
.button {
font-size: 1rem; /* 基准大小 */
padding: 0.5em 1em; /* 内边距随字体大小缩放 */
border-radius: 0.25em; /* 圆角也随字体大小缩放 */
}
.button--large {
font-size: 1.25rem; /* 只需改变字体大小 */
/* padding和border-radius会自动缩放 */
}
.button--small {
font-size: 0.875rem;
}3. 布局设计
/* 网格布局 - 混合使用不同单位 */
.grid-container {
max-width: 1200px; /* 固定最大宽度 */
margin: 0 auto; /* 居中 */
padding: 2rem 5%; /* 固定内边距 + 响应式边距 */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.grid-item {
padding: 1.5rem; /* 使用rem保持一致性 */
min-height: 40vh; /* 最小高度基于视口 */
}单位选择指南
1. 字体大小
/* 推荐使用rem */
body {
font-size: 1rem; /* 遵循用户浏览器设置 */
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
/* 组件内部使用em */
.card {
font-size: 1rem;
}
.card__title {
font-size: 1.25em; /* 相对于卡片字体大小 */
}
.card__subtitle {
font-size: 0.875em;
}2. 间距和尺寸
/* 布局级别使用rem */
.section {
margin: 4rem 0; /* 大的间距使用rem */
padding: 2rem;
}
/* 组件级别使用em */
.button {
padding: 0.5em 1em; /* 相对于按钮字体大小 */
margin: 0.25em;
}
/* 精确控制使用px */
.border {
border: 1px solid #ccc; /* 边框通常使用px */
}
.icon {
width: 24px; /* 图标固定尺寸 */
height: 24px;
}3. 响应式设计
/* 视口单位用于全屏元素 */
.hero {
height: 100vh; /* 全屏高度 */
width: 100vw; /* 全屏宽度 */
}
/* 响应式字体 */
.responsive-text {
font-size: clamp(1rem, 2.5vw, 2rem); /* 最小1rem，理想2.5vw，最大2rem */
}
/* 百分比用于相对布局 */
.sidebar {
width: 25%; /* 相对于容器宽度 */
}
.content {
width: 75%;
}现代CSS函数
/* calc() - 混合单位计算 */
.element {
width: calc(100% - 2rem); /* 百分比减去固定值 */
height: calc(100vh - 4rem); /* 视口高度减去固定值 */
font-size: calc(1rem + 0.5vw); /* 固定基础 + 响应式增量 */
}
/* clamp() - 响应式数值范围 */
.responsive {
font-size: clamp(1rem, 4vw, 2rem); /* 最小值，理想值，最大值 */
padding: clamp(1rem, 5%, 3rem);
}
/* min() / max() - 取最小/最大值 */
.flexible {
width: min(90%, 800px); /* 取90%和800px中的较小值 */
height: max(200px, 30vh); /* 取200px和30vh中的较大值 */
}最佳实践总结
推荐的单位选择：
- 字体大小：优先使用
rem，组件内部使用em - 布局间距：使用
rem或% - 组件内部间距：使用
em - 边框、阴影：使用
px - 响应式设计：使用
vw/vh和clamp() - 容器尺寸：使用
%或fr（Grid布局）
这样的搭配能够创建既灵活又一致的响应式设计。