使用rem时应该注意什么？

在前端开发中使用 rem 单位时，需要注意以下几点：

1. 根字体大小的设置和影响:

rem 的值是相对于根元素（<html>）的字体大小计算的。因此，设置 html 元素的 font-size 至关重要，它决定了所有 rem 单位的基准值。
改变 html 的 font-size 会影响所有使用 rem 单位的元素的大小。这可以用于实现全局的字体大小调整，例如响应式设计中的字体缩放。
不同的浏览器可能有默认的 html 字体大小，通常是 16px，但并非总是如此。最好显式地设置 html 的 font-size，以确保一致性。

2. 辅助计算和转换:

在实际开发中，为了方便计算，可以将 html 的 font-size 设置为一个容易计算的值，例如 10px 或 62.5% (相当于 10px 如果浏览器默认字体大小是 16px)。这样，1rem 就等于 10px，方便进行转换。
可以使用 CSS 预处理器（例如 Sass、Less）或 JavaScript 来进行 px 和 rem 之间的转换，提高开发效率。

3. 浏览器兼容性:

rem 单位在现代浏览器中得到广泛支持，包括 IE9+。对于一些非常老的浏览器，可能需要使用 px 作为后备方案。可以使用特性检测或 polyfill 来处理兼容性问题.

4. 可访问性:

使用 rem 有利于网页的可访问性。用户可以通过浏览器设置调整字体大小，而使用 rem 的布局会根据用户的设置进行缩放，从而提高用户的阅读体验。相比之下，使用 px 的布局则无法根据用户设置进行调整。

5. 使用场景:

rem 非常适合用于字体大小、边距、内边距等与字体相关的样式。它可以创建更具可扩展性和可维护性的布局。
对于一些需要精确控制像素的场景，例如图片大小或边框宽度，px 可能更合适。

6. 结合其他单位:

rem 可以与其他单位结合使用，例如 em、px、% 等。需要根据具体情况选择合适的单位组合。

7. 媒体查询:

在响应式设计中，可以结合媒体查询来根据不同的屏幕尺寸调整 html 的 font-size，从而实现不同屏幕下的字体缩放和布局调整。

示例：

html {
  font-size: 10px; /* 设置根字体大小为 10px */
}

body {
  font-size: 1.6rem; /* body 字体大小为 16px (1.6 * 10px) */
  padding: 2rem; /* padding 为 20px (2 * 10px) */
}

h1 {
  font-size: 2.4rem; /* h1 字体大小为 24px (2.4 * 10px) */
}