在响应式设计中，如果你想要您的网站或应用程序能够自适应不同屏幕大小和设备类型，那么您需要能够控制文本的大小以适应各种视图。
在本文中，我们将介绍如何使用 REM 来自适应文本大小。如果您熟悉 CSS 单位，您将知道 px 和 em 单位。但是，REM 单位不太为人所知，不过在开发响应式网站或应用程序时，它是一个非常有用的单位。
REM 单位是什么？
REM（font-size of the root element）是“根元素字体大小”的缩写，其根据根 HTML 元素的字体大小而定义。 如果您指定一个具有 REM 单位的字体大小，它将根据根元素的大小进行缩放。
例如，如果我们将根 HTML 元素的字体大小设置为 16px，那么 1rem 将等于 16px。 因此，如果我们在文本样式中使用 2rem，它将具有 32px 的字体大小。
REM 单位的优点
使用 REM 单位控制页面元素的大小和间距（即使是边框）非常有用，因为它使响应式元素的调整变得容易。
当您使用 REM 单位时，您可以保证根据文本大小进行自动缩放。换句话说，当文本增大时，其他元素也会相应地延伸，从而使设置更加均匀。
此外，使用 REM 单位还可以方便地为除根元素外的任何元素创建基于根元素的比例。在使用 REM 单位时，您只需要使其他元素的字体大小为其根据文本大小的系数。
如何使用 REM 单位
首先，让我们看一下一个简单的 HTML 文档：
--------- -----
----- ----------
------
----- --------------- --
---------- ---------------
-------
---- -
---------- -----
-
-- -
---------- -------
-
- -
---------- -----
-
--------
-------
------
---------- -----------
------ --- --- ----------
-------
-------在上面的示例中，我们将根 HTML 元素的字体大小设置为 16px：
---- - ---------- ----- -
然后，我们将标题元素的字体大小设置为 1.5rem，并将段落元素的字体大小设置为 1rem：
-- - ---------- ------- - - - ---------- ----- -
如前所述，如果我们假设根 HTML 元素的字体大小为 16px，则标题元素将具有 24px 的字体大小，而段落元素将具有 16px 的字体大小。
创建响应式字体大小控制
现在，我们将通过使用媒体查询和 REM 单位来创建响应式字体大小控制。
假设我们希望，当屏幕宽度小于 480px 时，我们的段落元素将具有更小的字体大小。
我们可以使用以下 CSS 代码来实现此目的：
------ ----------- ------ -
---- -
---------- -----
-
- -
---------- -------
-
-在上述示例中，我们使用媒体查询，指定了最大宽度为 480px。 然后，我们将根 HTML 元素的字体大小设置为 14px，并将段落元素的字体大小设置为 0.8rem。
由于我们正在使用相对单位 REM，因此字体大小会自动缩放。 因此，即使我们将根 HTML 元素的字体大小更改为 14px，该段落元素的字体大小也将自动缩放为 11.2px（0.8 倍 14）。
结论
使用 REM 单位可以使元素的自适应更加容易，因为它自动处理了元素的自适应。 当根元素的字体大小自动缩放时，页面上的所有元素大小都将自动缩放。 此外，每个元素相对于根元素的大小基于 REM 单位，因此将其他元素与文本大小比例对齐很容易。
使用上述技巧，您可以轻松地控制响应式网站或应用程序中文本的大小，并在不同的设备和屏幕上实现适当的显示效果。
示例代码
你可以在此查看完整示例代码：
--------- -----
----- ----------
------
----- --------------- --
---------- ---------------
-------
---- -
---------- -----
-
-- -
---------- -------
-
- -
---------- -----
-
------ ----------- ------ -
---- -
---------- -----
-
- -
---------- -------
-
-
--------
-------
------
---------- -----------
------ --- --- ----------
-------
-------来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6713225ead1e889fe20ab9bb