rem的基本用法rem（root em）是一种相对单位，它相对于文档的根元素（通常是<html>标签）的字体大小。使用r

rem（root em）是一种相对单位，它相对于文档的根元素（通常是<html>标签）的字体大小。使用rem单位可以让你更容易地创建一个统一的、响应式的布局，因为它不受父元素字体大小的影响，而是始终相对于根元素的字体大小。

基本用法

设定根元素的字体大小：
- 通常情况下，可以通过在<html>标签上设置font-size来定义rem的基础大小。例如，如果设置<html>的font-size为16px，那么1rem就等于16px。
```
css
html {
  font-size: 16px; /* 默认值 */
}
```
使用rem设置字体大小：
- 可以使用rem来设置任何元素的字体大小，这样就可以根据根元素的字体大小进行缩放。
```
css
body {
  font-size: 1rem; /* 等于 16px */
}
h1 {
  font-size: 2rem; /* 等于 32px */
}
```
设置边距、填充等：
- rem也可以用来设置边距、填充等，使它们相对于根元素的字体大小进行缩放。
```
css
.container {
  padding: 1rem; /* 等于 16px 的内边距 */
  margin: 2rem; /* 等于 32px 的外边距 */
}
```

优势

易于维护：因为所有使用rem的元素都相对于同一个基准（即根元素的字体大小），所以更容易调整整体布局的大小，只需修改一次根元素的字体大小即可。
响应式设计：rem非常适合响应式设计，因为你可以根据屏幕大小动态调整根元素的字体大小，从而影响整个页面的布局。

实际应用

动态调整根元素字体大小：

可以通过JavaScript来根据屏幕宽度或其他条件动态调整根元素的字体大小。

javascript
function setRem() {
  var html = document.documentElement;
  var width = html.clientWidth;
  if (width / 10 > 16) {
    html.style.fontSize = (width / 10) + 'px';
  } else {
    html.style.fontSize = '16px';
  }
}
window.addEventListener('resize', setRem);
setRem(); // 初始化

这段代码根据视口宽度动态设置根元素的字体大小，使得1rem等于视口宽度的十分之一，但不超过16px。

兼容性：
- rem单位在现代浏览器中有很好的支持，包括IE9及以上版本。对于不支持rem的浏览器，可以提供一个回退方案，比如同时提供一个绝对单位的声明。
```
css
.example {
  font-size: 1rem; /* 主要单位 */
  font-size: 16px; /* 回退方案 */
}
```

通过使用rem单位，你可以创建更加灵活和响应式的布局，同时保持设计的一致性和易维护性。