在前端开发中，响应式设计是必不可少的一部分。而字体大小的自适应是响应式设计中的一个重要问题，因为我们需要针对不同的设备大小和屏幕分辨率来设置字体大小。在这篇文章中，我们将介绍如何使用 rem 实现字体大小的自适应。
什么是 rem
rem 是 CSS3 新增的一个相对长度单位，它是相对于根元素（即 html 元素）字体大小的单位。这意味着当根元素的字体大小发生变化时，rem 单位的大小也会随之改变。
比如，当我们设置根元素的字体大小为 16px 时，1rem 就等于 16px。如果我们把根元素的字体大小设置为 20px，那么 1rem 就等于 20px。
使用 rem 实现字体大小自适应的步骤
下面是使用 rem 实现字体大小自适应的步骤：
1. 设置根元素的字体大小
首先，我们需要设置根元素的字体大小。通常情况下，我们会把根元素的字体大小设置为 16px。这样，我们就可以把 1rem 等同于 16px。当然，根据实际情况需要调整根元素字体大小的大小。
html {
font-size: 16px;
}2. 使用 rem 设置字体大小
一旦我们设置了根元素的字体大小，我们现在就可以使用 rem 单位来设置其他元素的字体大小。在这里，我们使用一个名为 font-size 的 mixin 来设置字体大小。该 mixin 接受一个参数作为字体大小，这个参数将作为 rem 单位来设置字体大小。
@mixin font-size($size) {
font-size: $size * 1rem;
}3. 在媒体查询中更新根元素的字体大小
无论是桌面设备，还是移动设备，不同的屏幕尺寸都需要不同的字体大小。此时，我们需要根据屏幕尺寸大小更新根元素的字体大小。
-- -------------------- ---- -------
------ ----------- ------ -
---- -
---------- -----
-
-
------ ----------- ------ --- ----------- ------- -
---- -
---------- -----
-
-
------ ----------- ------- -
---- -
---------- -----
-
-使用示例
下面是一个使用 rem 实现字体大小自适应的示例代码：
-- -------------------- ---- -------
------
------
-------
---- -
---------- -----
-
------ ----------- ------ -
---- -
---------- -----
-
-
------ ----------- ------ --- ----------- ------- -
---- -
---------- -----
-
-
------ ----------- ------- -
---- -
---------- -----
-
-
---- -
------- --
-------- --
-
-- -
----------- -----
-------------- -----
-------- ---------------
-
- -
----------- --
-------------- -----
-------- ---------------
-
--------
-------
------
---------- -----------
------- -- - ------ ---------
-------
-------总结
使用 rem 实现字体大小自适应可以让我们创建一个响应式设计和适应不同屏幕大小的设备。通过这个技术，我们可以设置根元素的字体大小，然后使用 rem 单位来设置其他元素的字体大小。此外，在媒体查询中更新根元素的字体大小，可以让我们根据屏幕尺寸大小来调整字体大小。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6497e85248841e98944f1491