别再只会用 px 了！移动端适配必须掌握的 CSS 单位还在用 px 写布局？移动端适配早已进入 rem 与 dvh 的

在网页开发中，尺寸和间距的控制至关重要。CSS 提供了多种单位来定义元素的大小、字体、边距等样式属性。随着响应式设计和移动优先理念的普及，传统的绝对长度单位 px 已经不能满足复杂多变的设备需求，新的相对单位如 rem、vw/vh 和最新的 dvw/dvh 应运而生。

本文将带你系统地了解这些 CSS 单位，理解它们的工作原理、适用场景以及在移动端开发中的优势，并帮助你做出更合理的单位选择。

一、基本概念：CSS 长度单位分类

单位	类型	准确描述
`px`	绝对单位	CSS 中的逻辑像素单位，1px 表示 1 个 CSS 像素，不一定等于屏幕上的 1 个物理像素
`em`	相对单位	相对于当前元素的字体大小（若未设置则继承父级）
`rem`	相对单位	相对于根元素 `<html>` 的字体大小
`vw`	视口单位	视口宽度的 1%，100vw = 整个视口宽度
`vh`	视口单位	视口高度的 1%，100vh = 整个视口高度
`dvw`	动态视口单位	实际可视区域宽度的 1%（实验性，非标准）
`dvh`	动态视口单位	实际可视区域高度的 1%（实验性，非标准）

二、为什么移动端要避免使用 `px`？

缺点：

绝对性：1px 在不同分辨率下显示效果不一致，高清屏可能显得太小；
不利于缩放：用户无法通过浏览器设置调整基于 px 的字体大小；
响应式局限：需要手动为不同设备写媒体查询，维护成本高。

替代方案：

使用相对单位可以让页面自动适应不同的屏幕尺寸和设备类型，提升用户体验和开发效率。

三、`em`：局部缩放利器，但需谨慎使用

含义：

em 是相对于当前元素或其父元素的字体大小。

示例：

.parent {
  font-size: 20px;
}

.child {
  font-size: 1.5em; /* 30px */
}

注意事项：

嵌套问题：多个层级使用 em 可能导致“放大效应”，造成样式混乱。
适合组件内部缩放：如按钮、卡片等需要局部比例变化的场景。

四、`rem`：现代响应式设计的核心单位

含义：

rem 是相对于根元素（即 <html>）的字体大小。

示例：

html {
  font-size: 16px;
}

.title {
  font-size: 2rem; /* 32px */
}

优点：

统一基准：所有组件都依赖同一个字体大小，便于全局控制；
易于适配：可以通过 JavaScript 动态修改根字号，实现响应式；
移动端友好：是目前最主流的响应式单位之一。

动态 rem 设置示例（JS 版）：

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% 的视口高度。

示例：

.fullscreen {
  height: 100vh;
  width: 100vw;
}

优点：

响应性强：元素大小自动随视口变化；
适合全屏背景、导航栏等场景。

缺点：

受地址栏影响：在移动端，地址栏隐藏时视口高度会变化，可能导致布局抖动；
百分比陷阱：某些情况下 100vh 并不代表真正的“可见区域”。

六、`dvw` / `dvh`：动态视口单位，解决移动端痛点

含义：

dvw：1% 的动态可视区域宽度；
dvh：1% 的动态可视区域高度。

这些单位考虑到了浏览器 UI 的变化（如地址栏出现/消失），确保布局始终贴合用户的实际可视区域。

示例：

.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`	绝对（css的逻辑像素单位）	无	⭐
`em`	相对	当前或父级字体	⭐⭐⭐
`rem`	相对	根元素字体	⭐⭐⭐⭐⭐
`vw`	视口	视口宽度	⭐⭐⭐⭐
`vh`	视口	视口高度	⭐⭐⭐
`dvw`	动态视口	动态可视区域宽度	⭐⭐⭐⭐⭐
`dvh`	动态视口	动态可视区域高度	⭐⭐⭐⭐⭐

px究竟是相对单位还是绝对单位有很多异议，本篇文章就以MDN文档为准CSS 值和单位 - 学习 Web 开发 | MDN

别再只会用 px 了！移动端适配必须掌握的 CSS 单位

一、基本概念：CSS 长度单位分类

二、为什么移动端要避免使用 px？

缺点：