单位：px、em、rem、vw、vh、clamp 怎么选？
CSS 单位是响应式布局的核心，也是我刚学响应式时踩坑最多的知识点之一——明明写好的尺寸，换个屏幕、调个字体大小就错乱，排查后才发现是单位选得不对。px 是固定值、em/rem 是相对值、vw/vh 跟着视口走、clamp 能做流体排版，掌握它们的区别和用法，响应式开发、页面可访问性都会轻松很多。今天就把我整理的单位干货、实操经验和避坑技巧，分享给大家。
一、绝对单位：px 为主，其他慎用（我的日常用法）
绝对单位里，我日常开发只用 px（像素），其他单位（mm、cm、in、pt 等）几乎用不到，大多用于打印场景，新手不用花太多精力记忆。
/* px：像素，固定值，不会随任何因素变化 */
font-size: 16px;
width: 200px;
/* 打印场景专用，日常开发基本用不上 */
mm, cm, in, pt
分享我的实操心得：px 最适合用来设置固定不变的尺寸，比如边框宽度、小间距、图标大小、圆角等，这些地方不需要随字体、视口缩放，用 px 最精准，也最不容易出错。我早期曾用 em 设边框，结果字体一调，边框也跟着变粗，踩过一次坑后就再也不这么做了。
二、相对单位：em 好用但易踩坑，嵌套需谨慎
em 是相对单位，核心是“相对于当前元素的 font-size”——如果当前元素没设置 font-size，就继承父级的 font-size，这也是它容易踩坑的地方。
.parent { font-size: 16px; }
.child {
font-size: 1.5em; /* 相对于父级16px，就是24px */
padding: 1em; /* 重点：相对于自己的font-size（24px），就是24px */
margin: 0.5em; /* 相对于自己的font-size，就是12px */
}
/* 嵌套会累积，这是我踩过的大坑！ */
.grandchild { font-size: 1.2em; } /* 相对于子元素24px，就是28.8px，越嵌套越大 */
避坑提醒：em 最大的问题就是“嵌套累积”，嵌套层级越深，计算出来的尺寸越乱，我早期做导航菜单嵌套时，用 em 设字体，结果二级、三级菜单字体越变越大，排查了很久才找到原因。现在我只用 em 做简单的局部适配，嵌套场景坚决不用。
三、相对单位：rem 我的首选，全局缩放超省心
后来接触到 rem，直接解决了 em 嵌套累积的痛点！rem 也是相对单位，但它只相对于根元素（html）的 font-size，和父级元素没有关系，不会出现嵌套累积的问题，现在是我做全局布局、字体设置的首选单位。
/* 根元素字体大小，默认通常是16px，我会明确设置，避免浏览器差异 */
html { font-size: 16px; }
.box {
font-size: 1rem; /* 相对于html的16px，就是16px */
padding: 1.5rem; /* 16px×1.5=24px，计算直观 */
width: 20rem; /* 16px×20=320px，不用复杂换算 */
}
/* 响应式神器：只需修改根字号，全站元素就会等比缩放 */
@media (max-width: 768px) {
html { font-size: 14px; } /* 小屏缩小根字号，字体、间距、布局同步缩小 */
}
我的实操用法：rem 适合设置字体大小、容器间距、布局宽度等需要全局适配的样式，配合媒体查询修改根元素 font-size，就能轻松实现全站等比缩放，不用逐个修改每个元素的尺寸，效率大幅提升。
四、视口单位：vw、vh、vmin、vmax 做全屏/自适应超方便
视口单位是相对于“视口（浏览器可见区域）”的尺寸，和元素、根元素都无关，适合做全屏布局、自适应组件，比如首页Banner、全屏弹窗等，是响应式布局的“好帮手”。
/* vw：视口宽度的 1%，视口宽1000px，1vw就是10px */
.full-width { width: 100vw; } /* 占满视口宽度 */
.half-width { width: 50vw; } /* 占视口宽度的一半 */
/* vh：视口高度的 1%，视口高800px，1vh就是8px */
.full-height { height: 100vh; } /* 占满视口高度 */
/* vmin：vw 和 vh 里较小的那个，适合做正方形自适应 */
.square { width: 50vmin; height: 50vmin; } /* 始终是正方形，随视口缩放 */
/* vmax：vw 和 vh 里较大的那个，适合做全屏英雄区 */
.hero { height: 100vmax; }
高频坑点：这几个单位我踩过两个关键的坑，一定要记牢！1. 100vw 会包含浏览器滚动条的宽度，如果页面有纵向滚动条，用 100vw 会导致横向溢出，出现横向滚动条；2. 移动端用 100vh 时，浏览器地址栏显隐会导致高度跳动，体验很差，后来发现用 dvh 就能解决。
五、现代视口单位：dvh、svh、lvh 解决移动端高度跳动问题
为了解决传统 vh 在移动端的痛点，浏览器新增了 dvh、svh、lvh 三个现代视口单位，我现在做移动端全屏布局，全靠它们，再也不会出现高度跳动的问题。
/* dvh：动态视口高度，地址栏显隐时会自动调整高度，最常用、最推荐 */
.min-height: 100dvh; /* 移动端全屏布局首选，适配所有场景 */
/* svh：小视口高度，仅当浏览器地址栏始终可见时的视口高度 */
.min-height: 100svh;
/* lvh：大视口高度，仅当浏览器地址栏始终隐藏时的视口高度 */
.min-height: 100lvh;
我的实操建议：做移动端全屏页面、吸底组件时，优先用 dvh，它能自动适配地址栏的显隐，保证页面高度始终贴合视口，体验更流畅；svh 和 lvh 只用在特殊场景，日常开发很少用到。
六、clamp：流体排版神器，不用媒体查询也能自适应
clamp 是我近期最常用的“黑科技”，它能实现“流体排版”，语法很简单：clamp(最小值, 首选值, 最大值)，意思是在最小值和最大值之间，根据首选值随视口平滑变化，不用写一堆媒体查询，就能实现自适应，极大减少代码量。
/* 字体：最小1.5rem（24px），最大2.5rem（40px），随视口宽度平滑变化 */
h1 {
font-size: clamp(1.5rem, 4vw + 1rem, 2.5rem);
}
/* 容器：最小320px（小屏不挤），最大1200px（大屏不宽），随视口自适应 */
.container {
width: clamp(320px, 90vw, 1200px);
margin: 0 auto; /* 水平居中，适配所有屏幕 */
}
/* 间距：小屏16px，大屏24px，随视口同步变化，不用单独写媒体查询 */
.section {
padding: clamp(16px, 5vw, 24px);
}
我的实操技巧：首选值常用 vw + rem 或 calc 做线性变化，比如 4vw + 1rem，既能保证小屏有足够的尺寸，又能让大屏尺寸不夸张；clamp 适合设置字体、容器宽度、间距等需要“平滑自适应”的样式，比媒体查询更简洁、更流畅。
七、百分比 %：相对父级，布局常用但易踩坑
百分比 % 也是相对单位，核心是“相对于父级元素的 content 区域尺寸”，日常布局用得很多，但新手容易踩坑，尤其是高度设置。
.child {
width: 50%; /* 相对于父级content宽度的50%，布局常用 */
height: 100%; /* 相对于父级content高度的100%，容易失效 */
padding: 10%; /* 重点：margin、padding的%，始终相对父级宽度，不是高度！ */
}
避坑提醒：这是我早期踩过的高频坑——子元素设置 height: 100% 时，如果父级元素没有明确设置高度（比如父级 height 为 auto），子元素的 100% 就会失效，显示为内容高度。另外，margin 和 padding 的百分比，不管是水平还是垂直方向，都相对于父级的宽度，不是高度，新手很容易记混。
八、我的实际用法建议（直接套用，少踩坑）
结合我多年的开发经验，整理了一套单位使用规范，新手可以直接套用，不用再纠结怎么选，高效又避坑：
/* 1. 根字号：设置rem基准，避免浏览器差异 */
html { font-size: 16px; }
/* 2. 字体：rem（全局统一）或 clamp（流体自适应） */
body { font-size: 1rem; } /* 全局基础字体 */
h1 { font-size: clamp(1.5rem, 2vw + 1rem, 2.5rem); } /* 标题流体排版 */
/* 3. 间距：rem为主，保证全局一致性，配合clamp做自适应间距 */
.gap { gap: 1rem; }
.padding { padding: 1.5rem; }
.section-padding { padding: clamp(16px, 5vw, 24px); }
/* 4. 布局宽度：%（局部适配）、vw、clamp（全局自适应） */
.container { width: min(90vw, 1200px); } /* 结合min更稳妥 */
.child-box { width: 50%; } /* 父级容器内的局部适配 */
/* 5. 小固定值：px（精准不变） */
border: 1px solid #eee; /* 边框固定 */
border-radius: 4px; /* 圆角固定 */
.icon-size { width: 24px; height: 24px; } /* 图标固定尺寸 */
/* 6. 全屏布局：dvh（移动端）、vh（PC端） */
.full-screen { min-height: 100dvh; } /* 移动端全屏首选 */
九、个人总结：单位选择避坑核心（新手必看）
-
固定尺寸用 px：边框、圆角、小图标、固定间距，精准不混乱；
-
全局适配用 rem：字体、全局间距、布局，配合媒体查询改根字号，全站等比缩放；
-
嵌套场景避 em：em 易累积，只用在简单局部适配，嵌套层级深的场景坚决不用；
-
全屏/视口适配用 vw/vh + dvh：PC端用 vw/vh，移动端全屏用 dvh，避免高度跳动；
-
流体排版用 clamp：字体、容器宽度、自适应间距，不用媒体查询，简洁又流畅；
-
百分比慎用：记住“宽高相对父级、边距相对父级宽度”，父级无明确高度时，height: 100% 会失效。
其实单位选择没有绝对的对错，核心是结合场景，保证页面适配流畅、维护便捷。我从一开始分不清各种单位，到现在能熟练搭配使用，核心就是多实操、多踩坑、多总结，新手只要记住上面的规则，就能少走很多弯路。
