CSS 中有多种长度单位，每个单位dou有其特定的适用场景。正确选择单位不仅Neng让代码geng简洁，还Neng实现geng灵活、geng响应式的布局。说实话，咱就是说CSS 单位这东西，用得好，页面就漂亮，用不好，页面就乱糟糟的。本文深入解析 px、em、rem、vw、vh、clamp 六种Zui常用的 CSS 单位。

px 是 CSS 中Zui常用的绝对长度单位，代表屏幕上的一个物理像素点。

固定大小，不会随屏幕尺寸变化而变化

适合用于边框、阴影等需要精确尺寸的元素

/* 边框、阴影等精确值 */.box { border: 1px solid #ccc; box-shadow: 2px 2px 4px rgba;} 缺点

不支持响应式，屏幕尺寸变化时需要手动修改

在高 DPI 屏幕上，1px 可Neng显示为多个物理像素

em 是相对长度单位，相对于当前元素或其父元素的字体大小计算。

.parent { font-size: 16px;}.child { font-size: 2em; /* 32px */} 级联问题演示

<div style="font-size: 16px"> <div style="font-size: 2em"> <div style="font-size: 2em"> 这段文字会非常大！ </div> </div></div>

哈哈，你kan这个例子，是不是hen明显？级联问题是 em 的一大痛点。

rem 是相对长度单位，相对于根元素的字体大小计算。

html { font-size: 16px;}.child-rem { font-size: 2rem; /* 32px */} 使用场景

/* 基于视口大小调整根字体 */html { font-size: calc;}h1 { font-size: 2rem; /* 自动响应式 */}

说实话，rem 用起来比 em 舒服多了不用担心级联问题。

对了你有没有遇到过百度不收录的问题？为什么百度不收录我的网站呢？其实这个问题有hen多原因，比如网站内容质量、外部链接等等。你要检查你的网站是否有这些问题，然后对症下药。

vw 是相对长度单位，1vw = 视口宽度的 %。

.full-width { width: %; /* 或者 */ width:100vw }五、vh 什么是 vh

1vh = %, 你Ke以用它来Zuo全屏布局，比如登录页什么的。 .hero{height:vh;display:flex;align-items:center;justify-content:center}.modal-overlay{position:fixed;display:flex;align-items:center;justify-content:center;background-color:#fff}.modal{width:%;max-width:px;height:auto}vH , 你Ke以用其他方案替代,比如dvh 或者svh/lvh 你可Neng会问了那 clamp 是啥？ 其实 clamp 是一个函数，Ke以限制一个值在某个范围内。 比如.box{width:clamp} 它表示宽度Zui小200像素，随视口变化，但Zui大不超过800像素。 用 clamp Ke以实现geng加优雅的响应式设计,不仅限于字体大小,还Ke以用于间距/容器宽度等. 现代 CSS 开发中, rem + vw/vh + clamp 的组合Ke以应对大部分场景，既保证开发效率,又实现了优雅的响应式体验。