🚀 px、em、rem有什么不同
欢迎来到我的博客文章！所有文章都是满满的前端干货，文章简明扼要。
总结
px是绝对单位，em相对于当前元素字体大小，rem相对于根元素字体大小。理解它们的区别对于响应式设计和可维护的CSS至关重要。
三种单位详细对比
| 单位 | 定义 | 特点 | 适用场景 |
| px（像素） | 绝对单位，1px表示屏幕上的一个CSS像素点 | 固定大小，不随字体、父元素变化 | 边框、阴影、精确控制的小尺寸 |
| em | 相对单位，1em = 当前元素的font-size值 | 可继承、可级联，容易产生"em倍增效应" | 组件内部间距、需要跟随字体缩放的场景 |
| rem | 相对单位，1rem = 根元素<html>的font-size值 | 不继承、不级联，全局可控，避免嵌套问题 | 页面布局、全局间距、响应式设计 |
代码示例
基本用法示例：
html {
font-size: 16px; /* 默认根字号 */
}
p {
font-size: 1.5rem; /* 总是 24px (16px × 1.5) */
}
div {
padding: 2rem; /* 总是 32px (16px × 2) */
border: 1px solid #ccc; /* 固定1像素边框 */
}
🌟 常用技巧： 📝 方便计算的根字号设置：
为方便计算，很多项目会重置根字号
html {
font-size: 62.5%; /* 16px × 62.5% = 10px → 1rem = 10px */
}
body {
font-size: 1.6rem; /* = 16px，恢复正常字体大小 */
}
.container {
padding: 2rem; /* = 20px，计算更直观 */
margin: 1.5rem; /* = 15px */
}
💡 优势：
1rem = 10px，计算更加直观，设计稿转换更容易
em的倍增效应示例
.parent {
font-size: 1.2em; /* 相对于父元素 */
}
.child {
font-size: 1.2em; /* 1.2 × 1.2 = 1.44倍 */
}
.grandchild {
font-size: 1.2em; /* 1.44 × 1.2 = 1.728倍 */
}
/* 使用rem避免倍增效应 */
.parent-rem {
font-size: 1.2rem; /* 始终相对于根元素 */
}
.child-rem {
font-size: 1.2rem; /* 仍然是1.2倍，不会累积 */
}