在网页开发中，尺寸和间距的控制至关重要。CSS 提供了多种单位来定义元素的大小、字体、边距等样式属性。随着响应式设计和移动优先理念的普及，传统的绝对单位
px已经不能满足复杂多变的设备需求，新的相对单位如rem、vw/vh和最新的dvw/dvh应运而生。
本文将带你系统地了解这些 CSS 单位，理解它们的工作原理、适用场景以及在移动端开发中的优势，并帮助你做出更合理的单位选择。
🧮 一、基本概念：CSS 长度单位分类
| 单位 | 类型 | 描述 |
|---|---|---|
px |
绝对单位 | 像素点，固定大小 |
em |
相对单位 | 相对于当前或父级字体大小 |
rem |
相对单位 | 相对于 <html> 根元素字体大小 |
vw |
视口单位 | 视口宽度的 1% |
vh |
视口单位 | 视口高度的 1% |
dvw |
动态视口单位 | 实际可视区域宽度的 1% |
dvh |
动态视口单位 | 实际可视区域高度的 1% |
📱 二、为什么移动端要避免使用 px？
❌ 缺点：
- 绝对性 ：
1px在不同分辨率下显示效果不一致，高清屏可能显得太小； - 不利于缩放 ：用户无法通过浏览器设置调整基于
px的字体大小； - 响应式局限：需要手动为不同设备写媒体查询，维护成本高。
✅ 替代方案：
使用相对单位可以让页面自动适应不同的屏幕尺寸和设备类型，提升用户体验和开发效率。
🔄 三、em：局部缩放利器，但需谨慎使用
🔍 含义：
em 是相对于当前元素或其父元素的字体大小。
示例：
css
.parent {
font-size: 20px;
}
.child {
font-size: 1.5em; /* 30px */
}⚠️ 注意事项：
- 嵌套问题 ：多个层级使用
em可能导致"放大效应"，造成样式混乱。 - 适合组件内部缩放：如按钮、卡片等需要局部比例变化的场景。
🧭 四、rem：现代响应式设计的核心单位
🔍 含义：
rem 是相对于根元素（即 <html>）的字体大小。
示例：
css
html {
font-size: 16px;
}
.title {
font-size: 2rem; /* 32px */
}✅ 优点：
- 统一基准：所有组件都依赖同一个字体大小，便于全局控制；
- 易于适配：可以通过 JavaScript 动态修改根字号，实现响应式；
- 移动端友好：是目前最主流的响应式单位之一。
🛠️ 动态 rem 设置示例（JS 版）：
javascript
function setRem() {
const html = document.documentElement;
const width = html.clientWidth;
html.style.fontSize = (width / 7.5) + 'px'; // 假设设计图宽为 750px
}
window.addEventListener('resize', setRem);
setRem();这样，1rem 就等于 100px，你可以直接用 rem 写样式，比如 width: 7.5rem 表示 750px。
📏 五、vw / vh：视口单位，打造全屏布局神器
🔍 含义：
vw：1% 的视口宽度；vh：1% 的视口高度。
示例：
css
.fullscreen {
height: 100vh;
width: 100vw;
}✅ 优点：
- 响应性强：元素大小自动随视口变化；
- 适合全屏背景、导航栏等场景。
⚠️ 缺点：
- 受地址栏影响：在移动端，地址栏隐藏时视口高度会变化，可能导致布局抖动；
- 百分比陷阱 ：某些情况下
100vh并不代表真正的"可见区域"。
📱 六、dvw / dvh：动态视口单位，解决移动端痛点
🔍 含义：
dvw：1% 的动态可视区域宽度；dvh：1% 的动态可视区域高度。
这些单位考虑到了浏览器 UI 的变化（如地址栏出现/消失），确保布局始终贴合用户的实际可视区域。
示例：
css
.mobile-fullscreen {
height: 100dvh;
}✅ 优点：
- 更精准的视口控制；
- 解决
100vh在移动端的"地址栏抖动"问题； - 更适合现代 Web App 开发。
💡 使用建议：
- 移动端推荐使用
dvh替代vh，尤其是在需要全屏展示内容时； - 搭配
position: fixed或sticky使用效果更佳。
🎯 七、如何选择合适的单位？一份对比表送给你
| 单位 | 是否响应式 | 是否适合移动端 | 推荐场景 |
|---|---|---|---|
px |
❌ | ❌ | 精确控制、图标、像素艺术 |
em |
✅ | ⚠️ | 局部缩放、组件内字体 |
rem |
✅ | ✅ | 主体布局、字体、响应式设计 |
vw / vh |
✅ | ⚠️ | 全屏布局、弹性容器 |
dvw / dvh |
✅ | ✅ | 移动端全屏、App 式布局 |
🚀 八、未来趋势：更智能的单位 + 自动化工具
随着前端工程化的推进，越来越多的框架和工具支持自动单位转换和适配：
- PostCSS 插件 ：如
postcss-pxtorem可以自动将px转换为rem； - CSS-in-JS 库：如 Tailwind CSS 支持灵活的单位配置；
- 设计系统集成 ：Figma + 设计稿转代码工具也逐渐支持
rem和dvh； - Web Components & CSS Variables：结合变量和单位，实现更灵活的样式管理。
🧠 总结：单位选择的黄金法则
✅ 移动端开发首选
rem+dvh/dvw；✅ PC 端可用
rem+vw；✅ 局部缩放使用
em；✅ 避免使用
px，除非必要；
合理选择单位不仅能提高开发效率，还能让网页在各种设备上表现得更加优雅和专业。
📌 附录：单位速查表
| 单位 | 类型 | 相对对象 | 推荐指数 |
|---|---|---|---|
px |
绝对 | 无 | ⭐ |
em |
相对 | 当前或父级字体 | ⭐⭐⭐ |
rem |
相对 | 根元素字体 | ⭐⭐⭐⭐⭐ |
vw |
视口 | 视口宽度 | ⭐⭐⭐⭐ |
vh |
视口 | 视口高度 | ⭐⭐⭐ |
dvw |
动态视口 | 动态可视区域宽度 | ⭐⭐⭐⭐⭐ |
dvh |
动态视口 | 动态可视区域高度 | ⭐⭐⭐⭐⭐ |