核心概念：rem 是什么？
-
rem的全称是 root em。 -
em是相对于其父元素的字体大小。 rem是相对于根元素（<html>）的字体大小。、
默认情况下，几乎所有浏览器的根元素字体大小都是 16px。所以，在未做任何修改时：
1rem = 16px 2rem = 32px 0.5rem = 8px
rem 的主要用途
使用 rem 可以干很多让网页开发更灵活、更易维护的事情，主要有以下几个方面：
1. 实现响应式布局和可伸缩的界面
这是 rem 最强大、最常见的用途。通过改变根元素的 font-size，你就可以按比例地调整整个页面中使用 rem 为单位的所有元素的大小。
示例：使用媒体查询
/* 默认根字体大小（针对大屏幕） */
html {font-size: 16px;
}/* 中等屏幕 */
@media (max-width: 1200px) {html {font-size: 14px; /* 所有 rem 单位按比例缩小 */}
}/* 小屏幕（平板） */
@media (max-width: 768px) {html {font-size: 12px; /* 所有 rem 单位进一步缩小 */}
}/* 超小屏幕（手机） */
@media (max-width: 480px) {html {font-size: 10px; }
}/* 页面中的元素使用 rem */
.header {padding: 1rem; /* 在不同屏幕下会自动变为 16px, 14px, 12px, 10px */font-size: 1.5rem; /* 自动变为 24px, 21px, 18px, 15px */
}
.card {width: 20rem; /* 宽度也会随着根字体大小变化 */margin-bottom: 1rem;
}
通过这种方式，你只需要在媒体查询中修改一个值（html 的 font-size），整个页面的布局、间距、字体大小都会自动等比缩放，极大地简化了响应式设计的开发。
2. 保证可访问性：尊重用户的浏览器设置
有些用户会因为视力问题，在浏览器设置中调整默认的字体大小（例如，设置为 20px 或 24px）。
-
如果你使用
px这样的绝对单位，你的设置会覆盖用户的浏览器偏好，可能导致文字对他们来说仍然太小，损害可访问性。 - 如果你使用
rem，因为它是相对于根字体大小的，而根字体大小会尊重用户的设置。如果用户将默认字体大小设为20px，那么1rem就等于20px，你整个页面的布局都会基于这个新的基准值进行放大，用户体验更好。
3. 统一和维护设计尺度
在现代前端开发中，经常会将根字体大小设置为一个更方便计算的值，然后所有尺寸都基于 rem。
一种流行的技巧：将 html 的 font-size 设置为 62.5%。
html {font-size: 62.5%; /* 这相当于 16px * 0.625 = 10px */
}
设置之后，计算就变得非常简单：
-
1rem = 10px -
1.6rem = 16px -
2.4rem = 24px
你在写 CSS 的时候，脑子里就不用再做 16px 是 1rem 这种换算，直接想要多少 px，就除以 10 然后加上 rem 即可。这既保持了相对单位的灵活性，又拥有了绝对单位的直观性。
总结：使用 rem 可以干什么？
-
构建响应式布局：通过媒体查询改变根字体大小，一键控制整个页面的缩放比例。
-
提升可访问性：确保你的网站尊重用户在浏览器中设置的字体大小偏好。
-
统一设计系统：以一种易于维护和计算的方式，管理页面的间距、尺寸、字体大小等所有尺度。
最佳实践建议：
-
字体大小（
font-size）：优先使用rem，兼顾响应式和可访问性。 -
布局和间距（
padding,margin,width,height等）：同样优先使用rem，以保持整体布局的协调缩放。 -
与视口相关的布局：可以结合使用
vw（视口宽度单位）来设置根字体大小，实现更灵活的流体布局。 -
极小的样式（如边框）：对于
1px边框，继续使用px通常更合适，因为你不希望它们随着布局缩放。