CSS rem单位
什么是rem
rem 是 “root em” 的缩写，是CSS中的一个相对长度单位。它相对于根元素（通常是 <html> 元素）的字体大小来计算。
基本概念
- 1rem = 根元素的字体大小
- 默认情况下，大多数浏览器的根元素字体大小为16px
- 因此，在默认设置下：1rem = 16px
/* 假设根元素字体大小为16px */
.example {
font-size: 1rem; /* 16px */
margin: 2rem; /* 32px */
padding: 0.5rem; /* 8px */
}
rem vs em vs px
对比表格
| 单位 | 相对于 | 特点 | 适用场景 |
|---|---|---|---|
| px | 绝对单位 | 固定像素值 | 边框、阴影等需要精确控制的场景 |
| em | 父元素字体大小 | 会产生复合效应 | 组件内部的相对尺寸 |
| rem | 根元素字体大小 | 统一参考标准 | 全局一致性设计、响应式布局 |
代码对比示例
/* 设置根元素字体大小 */
html { font-size: 16px; }
/* px - 绝对单位 */
.px-example {
font-size: 16px; /* 始终16px */
margin: 20px; /* 始终20px */
}
/* em - 相对父元素 */
.parent { font-size: 20px; }
.em-example {
font-size: 1.5em; /* 30px (20px * 1.5) */
margin: 1em; /* 30px (基于自身font-size) */
}
/* rem - 相对根元素 */
.rem-example {
font-size: 1.5rem; /* 24px (16px * 1.5) */
margin: 1rem; /* 16px */
}
em的复合效应问题
html { font-size: 16px; }
.level1 { font-size: 1.2em; } /* 19.2px */
.level2 { font-size: 1.2em; } /* 23.04px (19.2px * 1.2) */
.level3 { font-size: 1.2em; } /* 27.65px (23.04px * 1.2) */
<div class="level1">
Level 1
<div class="level2">
Level 2
<div class="level3">Level 3</div>
</div>
</div>
使用rem可以避免这种复合效应：
.level1 { font-size: 1.2rem; } /* 19.2px */
.level2 { font-size: 1.2rem; } /* 19.2px */
.level3 { font-size: 1.2rem; } /* 19.2px */
rem的工作原理
根元素字体大小设置
/* 方法1：直接设置像素值 */
html {
font-size: 16px;
}
/* 方法2：使用百分比（推荐） */
html {
font-size: 62.5%; /* 10px，方便计算 */
}
/* 方法3：使用vw单位实现流体字体 */
html {
font-size: 4vw;
font-size: clamp(14px, 4vw, 22px);
}
计算示例
/* 当html { font-size: 16px; } */
.container {
width: 50rem; /* 800px */
height: 30rem; /* 480px */
padding: 2rem; /* 32px */
margin: 1.5rem auto; /* 24px auto */
}
/* 当html { font-size: 62.5%; } (10px) */
.container {
width: 80rem; /* 800px */
height: 48rem; /* 480px */
padding: 3.2rem; /* 32px */
margin: 2.4rem auto; /* 24px auto */
}
rem的优势
1. 统一的参考标准
所有使用rem的元素都基于同一个参考点，确保了整体设计的一致性。
2. 易于维护
只需修改根元素的字体大小，即可成比例地调整整个页面的尺寸。
/* 小屏设备 */
html { font-size: 14px; }
/* 大屏设备 */
@media (min-width: 768px) {
html { font-size: 16px; }
}
/* 超大屏设备 */
@media (min-width: 1200px) {
html { font-size: 18px; }
}
3. 响应式友好
配合媒体查询，可以轻松实现响应式设计。
4. 用户友好
尊重用户的字体大小偏好设置。
/* 用户设置浏览器字体为20px时 */
html { font-size: 100%; } /* 20px */
.content { font-size: 1rem; } /* 20px，而不是固定的16px */
rem的实际应用
1. 布局尺寸
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
gap: 2rem;
padding: 2rem;
}
.card {
padding: 1.5rem;
border-radius: 0.5rem;
box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.1);
}
2. 字体尺寸层级
h1 { font-size: 2.5rem; } /* 40px */
h2 { font-size: 2rem; } /* 32px */
h3 { font-size: 1.5rem; } /* 24px */
h4 { font-size: 1.25rem; } /* 20px */
p { font-size: 1rem; } /* 16px */
small { font-size: 0.875rem; } /* 14px */
3. 间距系统
:root {
--spacing-xs: 0.25rem; /* 4px */
--spacing-sm: 0.5rem; /* 8px */
--spacing-md: 1rem; /* 16px */
--spacing-lg: 1.5rem; /* 24px */
--spacing-xl: 2rem; /* 32px */
--spacing-xxl: 3rem; /* 48px */
}
.component {
margin-bottom: var(--spacing-lg);
padding: var(--spacing-md);
}
响应式设计中的rem
1. 基础响应式方案
/* 移动端优先 */
html {
font-size: 87.5%; /* 14px */
}
/* 平板 */
@media (min-width: 768px) {
html {
font-size: 100%; /* 16px */
}
}
/* 桌面 */
@media (min-width: 1024px) {
html {
font-size: 112.5%; /* 18px */
}
}
/* 大屏 */
@media (min-width: 1440px) {
html {
font-size: 125%; /* 20px */
}
}
2. 流体字体方案
html {
font-size: clamp(14px, 2.5vw, 22px);
}
/* 或使用calc()函数 */
html {
font-size: calc(14px + (22 - 14) * ((100vw - 320px) / (1920 - 320)));
}
3. 容器查询配合rem
.card-container {
container-type: inline-size;
}
@container (min-width: 30rem) {
.card {
padding: 2rem;
font-size: 1.125rem;
}
}
rem的最佳实践
1. 设置合理的根字体大小
/* 推荐：使用62.5%便于计算 */
html {
font-size: 62.5%; /* 1rem = 10px */
}
/* 或使用100%尊重用户设置 */
html {
font-size: 100%; /* 1rem = 16px（默认） */
}
2. 建立设计系统
:root {
/* 字体尺寸 */
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 1.875rem;
--text-4xl: 2.25rem;
/* 间距 */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-10: 2.5rem;
--space-12: 3rem;
}
3. 混合使用不同单位
.component {
/* 布局用rem */
width: 30rem;
padding: 1.5rem;
margin-bottom: 2rem;
/* 边框用px */
border: 1px solid #ccc;
/* 阴影用px */
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
4. 媒体查询断点
/* 使用em作为媒体查询断点（更稳定） */
@media (min-width: 48em) { /* 768px */
html { font-size: 18px; }
}
@media (min-width: 64em) { /* 1024px */
html { font-size: 20px; }
}
常见问题与解决方案
1. rem值的计算复杂
问题：计算rem值不够直观
解决方案：
/* 方案1：使用62.5%基准 */
html { font-size: 62.5%; } /* 1rem = 10px */
/* 方案2：使用CSS变量 */
:root {
--base-font-size: 1.6rem; /* 16px */
}
/* 方案3：使用预处理器函数 */
@function rem($px) {
@return $px / 16px * 1rem;
}
.element {
font-size: rem(24px); /* 1.5rem */
}
2. 在某些情况下rem不适用
问题：边框、阴影等细节使用rem会在小屏上消失
解决方案：
.card {
/* 布局使用rem */
padding: 1.5rem;
margin: 1rem;
/* 细节使用px */
border: 1px solid #ddd;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
/* 使用max()确保最小值 */
border-radius: max(0.5rem, 4px);
}
3. 根字体大小被意外覆盖
问题：第三方库重置了根字体大小
解决方案：
/* 使用更高优先级 */
html {
font-size: 16px !important;
}
/* 或在文档末尾重新声明 */
html {
font-size: 16px;
}
4. 无障碍访问问题
问题：固定根字体大小可能影响无障碍访问
解决方案：
/* 使用百分比保持用户设置 */
html {
font-size: 100%; /* 尊重用户浏览器设置 */
}
/* 或提供字体大小切换 */
html.font-small { font-size: 87.5%; }
html.font-large { font-size: 112.5%; }
html.font-larger { font-size: 125%; }
浏览器兼容性
支持情况
- 现代浏览器：完全支持
- IE9+：完全支持
- IE8：不支持，需要polyfill
IE8兼容方案
/* 使用条件注释或CSS hack */
.element {
font-size: 24px; /* IE8 fallback */
font-size: 1.5rem; /* 现代浏览器 */
}
/* 或使用PostCSS插件自动转换 */
移动端兼容性
/* 防止iOS Safari的字体大小调整 */
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
实际项目示例
1. 完整的响应式导航
:root {
--nav-height: 4rem;
--nav-padding: 1rem;
}
.navbar {
height: var(--nav-height);
padding: 0 var(--nav-padding);
background: white;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.nav-logo {
font-size: 1.5rem;
font-weight: bold;
}
.nav-links {
gap: 2rem;
}
.nav-link {
font-size: 1rem;
padding: 0.5rem 1rem;
border-radius: 0.25rem;
}
/* 移动端响应 */
@media (max-width: 48em) {
:root {
--nav-height: 3.5rem;
--nav-padding: 0.75rem;
}
.nav-logo {
font-size: 1.25rem;
}
.nav-link {
font-size: 0.875rem;
padding: 0.375rem 0.75rem;
}
}
2. 卡片式布局系统
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
gap: 1.5rem;
padding: 2rem;
}
.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.2s ease, box-shadow 0.2s ease;
}
.card:hover {
transform: translateY(-0.25rem);
box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
}
.card-title {
font-size: 1.25rem;
margin-bottom: 0.75rem;
}
.card-content {
font-size: 0.875rem;
line-height: 1.5;
color: #666;
margin-bottom: 1rem;
}
.card-button {
padding: 0.5rem 1rem;
background: #007bff;
color: white;
border: none;
border-radius: 0.25rem;
font-size: 0.875rem;
}
3. 表单设计
.form-container {
max-width: 30rem;
margin: 2rem auto;
padding: 2rem;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
font-size: 0.875rem;
}
.form-input {
width: 100%;
padding: 0.75rem;
border: 1px solid #ddd;
border-radius: 0.25rem;
font-size: 1rem;
}
.form-input:focus {
border-color: #007bff;
box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
}
.form-button {
width: 100%;
padding: 0.75rem;
background: #007bff;
color: white;
border: none;
border-radius: 0.25rem;
font-size: 1rem;
cursor: pointer;
}
总结
rem单位是现代CSS开发中的重要工具，它提供了：
- 统一的参考标准：基于根元素字体大小
- 良好的可维护性：易于全局调整
- 响应式友好：配合媒体查询实现自适应
- 用户友好：尊重用户的字体大小偏好
使用建议
- 布局、间距、字体大小优先使用rem
- 边框、阴影等细节使用px
- 建立基于rem的设计系统
- 合理设置根字体大小
- 配合其他单位混合使用
掌握rem的使用，将大大提升你的CSS开发效率和代码质量。记住，选择合适的单位比单纯使用某一种单位更重要。