在网页开发中，CSS 单位是控制元素尺寸、间距和排版的基础。
长期以来，px（像素）因其直观、精确而被广泛使用。
然而，随着设备屏幕尺寸和用户需求的多样化，单纯依赖 px 已难以满足现代 Web 对可访问性 、灵活性 和响应式能力的要求。
什么是 px？
px 是 CSS 中的绝对长度单位，代表像素（pixel）。
在标准密度屏幕上，1px 通常对应一个物理像素点。
开发者使用 px 可以精确控制元素的大小，例如：
css
.container {
width: 320px;
font-size: 16px;
padding: 12px;
}这种写法简单直接，在固定尺寸的设计稿还原中非常高效。但问题也正源于它的绝对性。
px 存在哪些问题？
1. 缺乏响应能力
px 的值是固定的，不会随屏幕宽度、容器大小或用户设置而变化。
在一个 320px 宽的手机上显示良好的按钮，在 4K 显示器上可能显得微不足道，反之亦然。
2. 不利于可访问性
许多用户（尤其是视力障碍者）会调整浏览器的默认字体大小。
但使用 px 定义的字体不会随之缩放，导致内容难以阅读。
相比之下，使用相对单位（如 rem）能尊重用户的偏好设置。
更好的选择
为解决上述问题，CSS 提供了一系列更智能、更灵活的单位和功能。以下是几种核心方案：
1. 相对单位：rem 与 em
rem（root em）：相对于根元素（<html>）的字体大小。默认情况下，1rem = 16px，但可通过设置html { font-size: 18px }改变基准。em：相对于当前元素或其父元素的字体大小，常用于局部缩放。
示例：
css
html {
font-size: 16px; /* 基准 */
}
.title {
font-size: 1.5rem; /* 24px */
margin-bottom: 1em; /* 相对于自身字体大小 */
}优势：支持用户自定义缩放，便于构建比例一致的排版系统。
2. 视口单位：vw、vh、vmin、vmax
这些单位基于浏览器视口尺寸：
1vw= 视口宽度的 1%1vh= 视口高度的 1%vmin取宽高中较小者，vmax取较大者
用途：适合全屏布局、动态高度标题等场景。
示例：
css
.hero {
height: 80vh; /* 占视口高度的 80% */
font-size: 5vw; /* 字体随屏幕宽度缩放 */
}注意：在移动端，vh 可能受浏览器地址栏影响，需谨慎使用。
3. clamp() 函数：实现流体响应
clamp() 是 CSS 的一个重要进步，允许你在一个属性中同时指定最小值、理想值和最大值：
css
font-size: clamp(16px, 4vw, 32px);含义：
- 在小屏幕上，字体不小于 16px；
- 在中等屏幕，按 4vw 动态计算；
- 在大屏幕上，不超过 32px。
这行代码即可替代多个 @media 查询，实现平滑、连续的响应效果。
更推荐结合相对单位使用：
css
font-size: clamp(1rem, 2.5vw, 2rem);这样既保留了可访问性，又具备响应能力。
4. 容器查询（Container Queries）
过去，响应式布局只能基于整个视口（通过 @media）。
但组件常常需要根据自身容器的大小来调整样式------这就是容器查询要解决的问题。
使用步骤：
- 为容器声明
container-type：
css
.card-wrapper {
container-type: inline-size; /* 基于内联轴（通常是宽度） */
}- 使用
@container编写查询规则：
css
@container (min-width: 300px) {
.card-title {
font-size: 1.25rem;
}
}
@container (min-width: 500px) {
.card-title {
font-size: 1.75rem;
}
}现在，只要 .card-wrapper 的宽度变化，内部元素就能自动响应，无需关心页面整体布局。这对构建可复用的 UI 组件库至关重要。
容器查询已在主流浏览器（Chrome 105+、Firefox 116+、Safari 16+）中得到支持。
建议
- 避免在字体大小、容器宽度、内边距等关键布局属性中使用纯
px。 - 优先使用
rem作为全局尺寸基准，em用于局部比例。 - 对需要随屏幕缩放的元素，使用
clamp()+vw/rem组合。 - 构建组件时，考虑启用容器查询，使其真正"自适应"。
- 保留
px仅用于不需要缩放的场景 ，如边框（border: 1px solid）、固定图标尺寸等。
本文首发于公众号：程序员大华，专注分享前后端开发的实战笔记。关注我，少走弯路，一起进步！