web像素

px、em 与 rem 区别

单位	计算依据	适用场景	优点	缺点
px (像素)	直接对应设备像素（或浏览器的 CSS 像素）	固定尺寸、精确排版、图标等	1. 易于直观控制 2. 与硬件无关，渲染一致	1. 不随用户字体设置改变 2. 对响应式不友好
em	相对于当前元素的字体大小 (font-size)	需要继承、层级自适应时使用	1. 层级可复用 2. 对父元素大小变化敏感	1. 嵌套层级会累乘，难以预估 2. 需要注意继承链
rem	相对于根元素 (html) 的字体大小	全局统一、响应式布局时使用	1. 根基准固定，层级无累乘 2. 易于全局调节	1. 根字体大小需在 CSS 或 JS 设置 2. 与 em 相比略显冗余

---

1. px（像素）

• 定义：一种绝对单位，直接对应屏幕像素或 CSS 像素（取决于浏览器缩放）。
• 优点：尺寸固定，设计稿与实现一致；对图形、边框、阴影等细节控制精准。
• 缺点：不随用户改变浏览器默认字体大小而自适应；在高 DPI 设备上可能出现模糊或尺寸不匹配。

使用建议：用在需要精确控制的地方（按钮高度、图标尺寸、边框粗细等），但不宜过度使用。

---

2. em（相对字体）

• 定义：1em 等于当前元素的 font-size。
• 继承特性：如果父元素字体大小是 20px，子元素设置 1.5em 就等于 30px。
• 优点：可随层级变化自适应，能在嵌套结构中保持比例。
• 缺点：层级越深，尺寸会按链式累乘，导致难以预测。
• 典型用途：表单输入、按钮文字大小、内联元素的间距等。

技巧：在需要层级继承但不想让尺寸“爆炸”时，先给父元素设置一个基准 font-size（例如 100%），然后子级用 em。

---

3. rem（相对根）

• 定义：1rem 等于 html 根元素的 font-size。
• 优势：不受层级影响，任何地方使用 rem 都是相同基准。
• 全局调节：在 html{font-size: 16px;} 或通过 JavaScript 动态调整根字体大小即可一次性影响整个页面。
• 适合：响应式设计、全局布局尺寸（宽度、边距）、排版比例等。
• 缺点：需要在根元素统一设置基准，若忘记或被覆盖会导致所有 rem 失效。

最佳实践：

html { font-size: 16px; } /* 或者根据视口宽度动态设置 */ body { font-size: 1rem; } /* 默认 16px */ h1 { font-size: 2.5rem; } .btn { padding: 0.75rem 1.25rem; }

---

如何选择

场景	推荐单位
需要与用户浏览器缩放或字体设置同步的文本	em 或 rem
全局统一比例（排版、布局）	rem
固定尺寸的 UI 组件或图标	px
嵌套组件内部需要继承父级比例	em

小结

• px：绝对，易于实现但缺乏灵活性。
• em：相对于当前元素，继承层级可调，但易产生累乘。
• rem：相对于根，既保持全局统一，又避免层级累乘，是现代响应式布局的首选。

通过合理组合这三种单位，可以在保证设计精度与可访问性的同时，让页面更具可维护性和适应性。```