在响应式设计中，为不同设备和屏幕尺寸提供合适的字体大小非常重要。同时，对于不同的文本元素，可能需要不同的字体大小。为了实现这一目标，我们可以使用多重 font-size 选择技术，这样可以根据不同情况选用不同的字体大小。本文将介绍如何使用这一技术。
rem 和 em 单位
在开始介绍多重 font-size 选择技术之前，先介绍一下两个非常重要的单位：rem 和 em。
rem
rem（root em）是相对于根元素（<html> 元素）的字体大小来计算的长度单位。实际上，rem 就是 em 的一种特殊情况。我们可以通过设置根元素的字体大小来控制 rem 的基准值。这样，在不同设备和屏幕尺寸下，rem 的值可以得到正确的计算。
em
em 是相对于当前元素的字体大小来计算的长度单位。例如，如果当前元素的字体大小是 16px，那么 1em 就等于 16px。如果一个元素的字体大小是 1.5em，那么它的字体大小就是父元素字体大小的 1.5 倍。
多重 font-size 选择
使用媒体查询
首先，我们可以使用媒体查询来选择不同的字体大小。例如，我们可以设置以下代码：
-- -------------------- ---- -------
-- ------- ---- --
---- -
---------- -----
-
-- ------- ----- ------- ---- --
------ ------ --- ----------- ------ -
---- -
---------- -----
-
-
-- ------- ----- ------- ---- --
------ ------ --- ----------- ------ -
---- -
---------- -----
-
-在这个例子中，我们使用媒体查询来控制字体大小。当屏幕宽度大于 800px 时，字体大小为 20px；当屏幕宽度小于 800px 时，字体大小为 16px。
使用 rem
我们还可以使用 rem 单位来选择字体大小。这样可以根据根元素的字体大小来计算不同元素的字体大小。例如，我们可以设置以下代码：
-- -------------------- ---- ------- -- -------- ---- -- ---- - ---------- ----- - -- -- ------ ------ ---- -- -- - ---------- ----- - -- - ------ -------- ---- -- - - ---------- ------- -
在这个例子中，我们设置根元素字体大小为 16px，然后使用 rem 单位来计算不同元素的字体大小。例如，h1 的字体大小为 2rem，即 32px；p 的字体大小为 1.5rem，即 24px。
使用 em
最后，我们可以使用 em 单位来选择字体大小。这样可以根据当前元素的字体大小来计算不同元素的字体大小。例如，我们可以设置以下代码：
-- -------------------- ---- ------- -- -------- ---- -- ---- - ---------- ----- - -- -- ------ ------------------- -- -- - ---------- ---- - -- - ------ --------------------- -- - - ---------- ------ -
在这个例子中，我们设置根元素字体大小为 16px，然后使用 em 单位来计算不同元素的字体大小。例如，h1 的字体大小为 2em，即根据父元素的字体大小计算得出；p 的字体大小为 1.5em，即根据父元素的字体大小计算得出。
总结
在响应式设计中，多重 font-size 选择技术非常重要。我们可以使用媒体查询、rem 单位以及 em 单位来实现多重 font-size 选择。正确使用这些技术可以让我们的网页在不同设备和屏幕尺寸下都能得到良好的显示效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6484264248841e989434eecd