CSS rem 使用方法

在本文中，我们将介绍使用 CSS 的 rem 单位编写网页时的使用方法。rem 是相对于根元素（html）字体大小的单位，它的大小会受到根元素字体大小的影响。使用 rem 单位可以使网站的排版更加灵活，而不受浏览器缩放等影响。

阅读更多：CSS 教程

定义字体大小

首先，在 CSS 中定义根元素字体大小。常见的做法是将根元素的字体大小设置为相对于视口的大小，这样当用户调整浏览器窗口大小时，根元素的字体大小也会跟随变化。

html {
  font-size: 16px;
}

@media screen and (min-width: 375px) {
  html {
    font-size: calc(16px + (20 - 16) * ((100vw - 375px) / (1440 - 375)));
  }
}

@media screen and (min-width: 1440px) {
  html {
    font-size: 20px;
  }
}

在上面的代码中，我们首先将根元素字体大小设置为 16px。然后，我们根据视口宽度来动态调整根元素字体大小。当视口在 375px 至 1440px 之间时，根元素字体大小会从 16px 缓慢增加到 20px。

这样做可以让网站在不同大小的屏幕上都有较好的排版效果。同时，我们也可以在不需要时禁用根元素字体大小的调整：

html {
  font-size: 16px;
}

@media screen and (max-width: 375px) {
  html {
    font-size: 16px;
  }
}

@media screen and (min-width: 375px) and (max-width: 768px) {
  html {
    font-size: calc(16px + (20 - 16) * ((100vw - 375px) / (1440 - 375)));
  }
}

@media screen and (min-width: 768px) {
  html {
    font-size: 20px;
  }
}

在上面的代码中，我们将根元素字体大小设置为 16px，并在视口宽度小于 375px 时禁用根元素字体大小调整。当视口宽度在 375px 至 768px 之间时，根元素字体大小会从 16px 缓慢增加到 20px，当视口宽度超过 768px 时，根元素字体大小会一直保持 20px。

使用 rem

有了根元素字体大小的定义之后，我们就可以使用 rem 单位来定义其他元素的字体大小，边框大小等。以字体大小为例：

body {
  font-size: 1rem;
}

h1 {
  font-size: 2rem;
}

p {
  font-size: 1.2rem;
}

在上面的代码中，我们将 body 元素字体大小设置为 1rem，h1 元素字体大小为 2rem，p 元素字体大小为 1.2rem。由于 rem 是相对于根元素字体大小的单位，所以 body 中字体大小为 1rem，即根据我们的定义，等于 16px。

在定义字体大小之外，我们还可以使用 rem 单位定义其他属性，如边框大小等：

body {
  font-size: 1rem;
}

.btn {
  padding: 0.5rem 1rem;
  border: 1px solid #000;
}

在上面的代码中，我们定义了一个 .btn 类，它的 padding 为 0.5rem 1rem，边框为 1px 实线黑色。由于 rem 单位是相对于根元素字体大小的，所以这个 .btn 元素的大小会随根元素字体大小的变化而变化，达到了网站在不同大小屏幕上的自适应。

使用 rem 的优势

使用 rem 单位的最大优势就是可以让网站在不同大小屏幕上实现自适应。由于 rem 单位的大小受根元素字体大小的影响，我们可以通过动态调整根元素字体大小来实现网站排版的自适应。

例如，在移动设备上，我们可能需要将根元素字体大小调小，以适应小屏幕尺寸。而在大屏幕显示器上，我们可以将根元素字体大小调大，以获得更好的视觉效果。

另外，使用 rem 单位也可以方便地实现网站排版的整体调整。例如，我们可以通过简单地调整根元素字体大小来实现整个网站的排版大小调整：

html {
  font-size: 18px;
}

@media screen and (max-width: 768px) {
  html {
    font-size: 16px;
  }
}

@media screen and (max-width: 375px) {
  html {
    font-size: 14px;
  }
}

在上面的代码中，我们定义了三个不同的根元素字体大小，分别适用于大屏幕、中等屏幕和小屏幕设备。这样，我们就可以通过简单地调整根元素字体大小，来实现整个网站排版大小的调整。

总结

通过使用 rem 单位，我们可以让网站排版更加灵活，并实现自适应。通过调整根元素字体大小，我们可以让网站在不同大小屏幕上都有较好的排版效果。同时，我们也可以通过调整根元素字体大小来实现整个网站排版大小的调整，从而方便地管理网站排版。因此，掌握 rem 单位的使用方法，可以让我们更好地编写优秀的网页。