rem 响应式布局（ rem 详解）
一、基本概念
rem（Root EM） 是 CSS 中的相对长度单位，其值始终 相对于根元素（<html>）的字体大小 计算：
1rem= 根元素的font-size值示例：若
html { font-size: 16px; }，则1rem = 16px，2rem = 32px
二、核心特点
1.相对根元素
与 em（相对于父元素）不同，rem 只与 <html> 的字体大小相关，不受嵌套影响。
2.响应式核心
通过修改根元素字体大小，可全局控制所有基于 rem 的尺寸，实现响应式适配。
3.计算关系
目标元素尺寸 = rem值 × 根元素font-size三、与常见单位的对比
| 单位 | 参照对象 | 特点 | 适用场景 |
|---|---|---|---|
rem | 根元素(<html>) | 全局一致，避免嵌套问题 | 布局/组件尺寸 |
em | 父元素字体大小 | 嵌套会导致计算复杂度增加 | 文本相关间距 |
px | 绝对像素 | 固定尺寸，不随设置改变 | 边框、固定元素 |
vw | 视口宽度 1% | 直接响应视口变化 | 全屏布局 |
四、最佳实践
1.设置根字体大小
推荐使用 62.5% 技巧（兼容且易计算）：
html {font-size: 62.5%; /* 默认16px × 62.5% = 10px */
}此时 1rem = 10px，计算更方便（例：1.6rem = 16px）。
2.响应式适配方案
方法1：媒体查询分段控制
@media (min-width: 768px) {html { font-size: 70%; } /* 约11.2px */
}
@media (min-width: 1200px) {html { font-size: 80%; } /* 约12.8px */
}方法2：JS动态计算（推荐）
根据设计稿宽度动态设置（设计稿常以 750px 为基准）：
document.documentElement.style.fontSize = (document.documentElement.clientWidth / 750) * 100 + 'px';使用：设计稿中 100px → CSS 中写 1rem
3.开发工作流
设计稿测量尺寸 ÷ 基准值（如100） = rem值
例：设计稿中按钮宽 150px →width: 1.5rem使用预处理器（Sass/Less）简化计算：
@function rem($px) {@return ($px / 100) * 1rem;
}
.button {width: rem(150); // 编译为 width: 1.5rem
}五、使用场景
1.布局尺寸
width/height/padding/margin 等
2.组件尺寸
按钮、卡片、输入框等需要自适应的组件
3.间距系统
统一管理 margin 和 padding 的缩放
六、注意事项
1.字体大小慎用 rem
建议用 em 保持文本层次关系，避免全局缩放影响可读性。
2.1px 边框问题
使用 px 避免 Retina 屏下边框过细。
3.兼容性
支持所有现代浏览器及 IE9+，老旧项目需提供 px 回退：
.box {width: 160px; /* 旧浏览器回退 */width: 16rem; /* 现代浏览器 */
}总结
| 要点 | 说明 |
|---|---|
| 本质 | 相对于根元素(<html>)字体大小的相对单位 |
| 核心优势 | 全局可控性，避免 em 的嵌套计算问题 |
| 响应式关键 | 通过 JS/媒体查询动态修改根字体大小实现整体缩放 |
| 开发技巧 | 62.5%基准法、JS动态计算、预处理器函数简化 |
| 适用场景 | 布局/组件/间距等需要整体适配的尺寸 |
| 避坑指南 | 字体用 em、边框用 px、老旧项目提供回退 |
选择建议：
✅ 响应式项目首选 rem 控制布局尺寸
✅ 结合 vw 实现更精细的视口适配
❌ 文本内容建议用 em 保持层级关系
❌ 固定元素（如图标）可配合 px 使用