弹性单位替代px是解决CSS跨设备显示不一致的核心方法，关键在于理解rem（根字体）、em（父字体）、vw/vh（视口）、%（包含块）的参照基准与适用场景，并配合viewport、媒体查询等综合使用。
用弹性单位（如 rem、em、%、vw/vh）替代固定像素（px），是解决 CSS 在不同设备显示不一致的核心方法之一。关键不在“换单位”，而在理解每种弹性单位的参照基准和适用场景。
优先使用 rem 做全局缩放控制
rem 相对于根元素（html）的字体大小，只要统一调控根字号，整个页面就能等比响应。适合做整体布局缩放，比如适配移动端小屏或大屏平板。
- 在
上通过 JS 动态设置font-size，例如根据屏幕宽度按比例计算：document.documentElement.style.fontSize = window.innerWidth / 375 * 16 + 'px';（以 375px 设计稿为基准，16px 为标准根字号） - CSS 中所有间距、字体、宽高尽量用
rem，如font-size: 1.125rem;（即 18px）、padding: 0.75rem; - 避免在
html上直接写死font-size: 16px;，否则失去动态调节能力
用 em 处理局部相对缩放
em 相对于父元素的字体大小，适合组件内嵌套缩放，比如按钮文字随容器变大而自动放大，或图标尺寸跟随文字流变化。
- 按钮内部图标用
font-size: 1.2em;，它会随按钮自身的font-size变化而缩放 - 慎用于 margin/padding 等布局属性——若父级字体频繁变动，可能导致意外堆叠或塌陷
- 与
rem混用时注意层级：子元素设em是为了继承上下文语义，不是为了替代全局响应逻辑
视口单位（vw/vh）精准匹配屏幕物理尺寸
vw（viewport width）和 vh（viewport height）以视口宽高为 100% 基准，1vw = 视口宽度的 1%，适合全屏背景、横幅、高度自适应容器等场景。
立即学习“前端免费学习笔记（深入）”；
- 全屏轮播图高度设为
height: 100vh;，确保撑满可视区域 - 标题字体随屏幕变大而增大：
font-size: clamp(1.25rem, 4vw, 2.5rem);（配合clamp()实现最小-理想-最大三段控制） - 注意：iOS Safari 对
vmin/vmax支持较晚，需测试兼容性；键盘弹出时部分安卓机型会误触发vh缩减，可用 JS 动态修正
百分比（%）用于流式布局而非绝对尺寸
% 相对于包含块（containing block）的尺寸，适合宽度类布局（如栅格、卡片容器），但不适合字体或边距——除非明确需要跟随父容器同比例缩放。
- 侧边栏 + 主内容区：用
width: 25%;和width: 75%;实现响应式分栏 - 图片容器设
width: 100%;+height: auto;，保证等比缩放不拉伸 - 避免对
font-size直接设120%—— 容易因多层嵌套产生不可控放大（如父 120% × 子 120% = 144%）
弹性单位不是万能解药，需配合 viewport 设置、媒体查询断点、字体渲染优化（如 -webkit-text-size-adjust: 100%;）一起使用。核心原则是：让尺寸有“参照”，而不是“钉死”。
