使用 REM 实现响应式设计中的页面字体自适应-JavaScript中文网-JavaScript教程资源分享门户

前言

在现代的网页设计中，响应式设计已经成为了必不可少的一部分。而响应式设计的一个重要的课题便是页面元素的自适应，其中页面字体的自适应在整个页面元素自适应中显得十分重要。

在这篇文章中，我们将介绍如何使用 REM 实现响应式设计中的页面字体自适应。

什么是 REM

REM 是 CSS3 中新增加的一个相对长度单位，在 Web 设计中被广泛使用。REM 和 EM 是很像的，都是相对于父元素的字体大小来进行计算，但 REM 不同的是它是相对于根元素的字体大小来计算的。

假设我们将网页根元素的 font-size 设置为 16px，那么一个 2rem 的元素的大小就会是 32px（2 * 16px）。

使用 REM 主要有以下几个优点：

可以很容易在不同的设备上调整字体大小；
能够实现字体相对自适应，使得网页在不同分辨率下展示时字体大小比例不变；
改变根元素的 font-size 大小可以实现全局的字体大小设置。

使用 REM 实现页面字体自适应

现在我们已经了解了 REM 的概念和使用，接下来就可以开始使用 REM 实现页面字体自适应了。

设置根元素 font-size 大小

在我们的 HTML 文件中，设置网页根元素的 font-size 大小，这一部分代码必须放在 HTML 的 head 标签中。

// javascriptcn.com 代码示例
<head>
  <meta charset="UTF-8">
  <title>使用REM实现响应式设计中的页面字体自适应</title>
  <style type="text/css">
    html {
      font-size: 16px;
    }
  </style>
</head>

在我们定义的 CSS 样式中，可以根据需要设置字体大小。

// javascriptcn.com 代码示例
p {
  font-size: 1rem;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.5rem;
}

这里的 1rem 代表的是根元素（即 html）的字体大小，因此在这里设置的字体的大小会自适应网页的大小。

调整根元素 font-size 大小

如果我们发现当前的字体大小不符合我们的需求，可以通过调整根元素 font-size 大小来实现全局的字体大小设置。

html {
  font-size: 20px;
}

这里将根元素的 font-size 设置成了 20px，那么在这个基础上，所有使用 rem 单位的字体大小依然会根据根元素的大小进行相应的调整。

总结

在这篇文章中，我们介绍了 REM 的概念和使用，以及如何使用 REM 实现响应式设计中的页面字体自适应。通过使用 REM，我们可以很容易的实现页面字体的相对自适应和全局的字体大小设置，使得网页在不同的分辨率下展示时字体大小比例不会发生变化，从而提升网页的可读性。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652fc81c7d4982a6eb0f92f6