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-size24px就是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.524px计算直观 */ width: 20rem; /* 16px×20320px不用复杂换算 */ } /* 响应式神器只需修改根字号全站元素就会等比缩放 */ media (max-width: 768px) { html { font-size: 14px; } /* 小屏缩小根字号字体、间距、布局同步缩小 */ }我的实操用法rem 适合设置字体大小、容器间距、布局宽度等需要全局适配的样式配合媒体查询修改根元素 font-size就能轻松实现全站等比缩放不用逐个修改每个元素的尺寸效率大幅提升。四、视口单位vw、vh、vmin、vmax 做全屏/自适应超方便视口单位是相对于“视口浏览器可见区域”的尺寸和元素、根元素都无关适合做全屏布局、自适应组件比如首页Banner、全屏弹窗等是响应式布局的“好帮手”。/* vw视口宽度的 1%视口宽1000px1vw就是10px */ .full-width { width: 100vw; } /* 占满视口宽度 */ .half-width { width: 50vw; } /* 占视口宽度的一半 */ /* vh视口高度的 1%视口高800px1vh就是8px */ .full-height { height: 100vh; } /* 占满视口高度 */ /* vminvw 和 vh 里较小的那个适合做正方形自适应 */ .square { width: 50vmin; height: 50vmin; } /* 始终是正方形随视口缩放 */ /* vmaxvw 和 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.5rem24px最大2.5rem40px随视口宽度平滑变化 */ 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移动端、vhPC端 */ .full-screen { min-height: 100dvh; } /* 移动端全屏首选 */九、个人总结单位选择避坑核心新手必看固定尺寸用 px边框、圆角、小图标、固定间距精准不混乱全局适配用 rem字体、全局间距、布局配合媒体查询改根字号全站等比缩放嵌套场景避 emem 易累积只用在简单局部适配嵌套层级深的场景坚决不用全屏/视口适配用 vw/vh dvhPC端用 vw/vh移动端全屏用 dvh避免高度跳动流体排版用 clamp字体、容器宽度、自适应间距不用媒体查询简洁又流畅百分比慎用记住“宽高相对父级、边距相对父级宽度”父级无明确高度时height: 100% 会失效。其实单位选择没有绝对的对错核心是结合场景保证页面适配流畅、维护便捷。我从一开始分不清各种单位到现在能熟练搭配使用核心就是多实操、多踩坑、多总结新手只要记住上面的规则就能少走很多弯路。