当前位置：首页 > news >正文

CSS 单位完全指南：掌握 em、rem、vh、vw 等响应式布局核心单位

news 2025/7/21 7:19:09

一、绝对单位 vs 相对单位

二、核心相对单位详解

1. em 单位

2. rem 单位（Root em）

3. vh 与 vw 单位

4. vmin 与 vmax 单位

三、实战应用场景对比

五、专家建议与最佳实践

六、总结

一、绝对单位 vs 相对单位

绝对单位（如px）固定不变，而相对单位则基于其他参考值动态计算，更适合响应式设计：

/* 绝对单位示例 */
.fixed-size {width: 300px; /* 始终为300像素 */
}/* 相对单位示例 */
.responsive-size {width: 50vw; /* 视口宽度的一半 */
}

二、核心相对单位详解

1. em 单位

计算方式：相对于当前元素的字体大小

特点：具有继承性，层级嵌套时会产生复合效果

.parent {font-size: 16px;
}.child {font-size: 1.5em; /* 16px × 1.5 = 24px */padding: 2em;     /* 24px × 2 = 48px */
}

2. rem 单位（Root em）

计算方式：相对于根元素(html)的字体大小

特点：避免嵌套影响，更易控制全局比例

html {font-size: 62.5%; /* 1rem = 10px (基于16px默认大小) */
}.container {font-size: 1.6rem; /* 16px */margin: 2rem;      /* 20px */
}

3. vh 与 vw 单位

vh：1% 的视口高度
vw：1% 的视口宽度

特点：直接响应视口尺寸变化

.hero-banner {height: 100vh;   /* 满屏高度 */width: 80vw;     /* 视口宽度的80% */
}

4. vmin 与 vmax 单位

vmin：取 vh/vw 中的较小值

vmax：取 vh/vw 中的较大值

/* 在移动端横屏时特别有用 */
.responsive-square {width: 50vmin;  /* 总保持较小尺寸的50% */height: 50vmin; /* 形成完美正方形 */
}

三、实战应用场景对比

单位	适用场景	注意事项
rem	字体大小、间距	设置`html{font-size:62.5%}`简化计算
em	与特定文本相关的内边距/外边距	注意多层嵌套的复合效果
vw/vh	全屏布局、横幅	移动端100vh可能包含地址栏高度
%	基于父元素的尺寸	父元素必须有明确尺寸定义

四、响应式单位组合实战

/* 响应式排版系统 */
html {font-size: 16px;/* 小屏幕调整 */@media (max-width: 768px) {font-size: 14px;}
}h1 {font-size: calc(1.5rem + 2vw); /* 基础大小+视口自适应 */
}/* 完美居中容器 */
.container {width: min(90vw, 1200px); /* 响应式宽度限制 */margin: 0 auto;
}/* 移动端适配 */
@media (orientation: portrait) {.sidebar {height: 50vmax; /* 竖屏时使用较大尺寸 */}
}

五、专家建议与最佳实践

字体系统：优先使用rem为主、em为辅
布局系统：主框架使用vw/vh，内部元素用%
移动端适配：使用dvh（dynamic viewport height）解决地址栏问题
安全计算：结合min()、max()和clamp()函数
```
/* 安全响应式文本 */
.title {font-size: clamp(1.5rem, 4vw, 3rem);
}/* 移动端高度修正 */
.mobile-section {height: 100dvh; /* 动态视口高度 */
}
```
关键提示：CSS4将引入新的容器查询单位（如cqw/cqh），可实现基于组件自身的响应式设计！