在移动端响应式设计中，最常见的问题之一就是字体大小适配问题。由于不同的设备分辨率和屏幕尺寸不同，字体大小的适配就显得尤为重要。本文将探讨解决移动端响应式设计下字体大小问题的方法，包括如何计算字体大小和如何用 CSS 实现适配。
计算字体大小
在移动端，我们通常使用以 dp 或者 em 为单位的字体大小。dp(设备独立像素) 是一种基于物理像素的虚拟像素，以这种单位设置的字体大小可以适配不同的分辨率；em 则是相对于父元素的字体大小，以这种单位设置的字体大小可以适配不同尺寸的屏幕。
在响应式设计下，我们需要为不同的设备计算出合适的字体大小。一种常见的做法是使用 CSS 媒体查询，根据设备的宽度选择不同大小的字体。例如：
-- -------------------- ---- ------- ------ ------ --- ----------- ------ - -- -- -- ---- - ---------- ----- - - ------ ------ --- ----------- ------ - -- -- -- ---- - ---------- ----- - - ------ ------ --- ----------- ------- - -- --- -- ---- - ---------- ----- - -
以上代码意味着在不同设备上，根据不同宽度选择不同的基础字体大小。接下来，我们将根据基础字体大小计算出具体的字体大小。
em 单位计算字体大小
根据 em 单位计算字体大小的公式是：
字体大小 = 基础字体大小 x 倍数
其中，倍数是根据设计图计算出来的相对于基础字体大小的倍数。例如，如果设计图中某个字体大小是基础字体大小的 1.5 倍，那么对应的倍数就是 1.5。
例如，在设计图中，某个标题的字体大小是 24px，在基础字体大小为 16px 的情况下，我们可以计算出这个标题的字体大小是 1.5 倍基础字体大小，即：
字体大小 = 16px * 1.5 = 24px
因此，我们可以使用以下代码设置这个标题的字体大小：
h1 {
font-size: 1.5em; /* 倍数为 1.5，基础字体大小为 16px */
}dp 单位计算字体大小
根据 dp 单位计算字体大小稍稍有些复杂。在通常情况下，我们需要先将 dp 转换为 px，再根据 px 计算相应的字体大小。
首先，我们需要获取该设备的像素密度，即 dpr。例如，iPhone 6 的像素密度为 2，那么我们可以使用以下代码获取该设备的像素密度：
let dpr = window.devicePixelRatio || 1;
其次，在设置字体大小时，我们需要将 dp 转换为 px。设备的宽度和高度分别为 w 和 h，设 dp 值为 dp，那么可以使用以下公式计算 px：
px = dp * dpr * (w / h)
最后，我们可以根据基础字体大小和计算出来的 px 值计算出字体大小。根据 em 计算字体大小的公式，我们可以得到以下公式：
字体大小 = px / 基础字体大小
综合以上公式，我们可以写出以下 JS 代码：
let dpr = window.devicePixelRatio || 1; let w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; let dp = /* 设定的 dp 值 */; let px = dp * dpr * (w / h); let fontSize = px / /* 基础字体大小 */;
接下来，我们可以将计算出来的字体大小应用到 CSS 中：
p {
font-size: calc(/* 基础字体大小 */ + (/* 计算出来的字体大小 */ / 16))em;
}响应式设计下字体大小的限制
在进行移动端响应式设计时，我们需要注意以下几个问题：
- 字体大小的最小值：通常我们会限制字体大小的最小值，以确保在不同的设备上文字不会过小。例如，我们可以设置最小字体大小为 12px。
- 字体大小的最大值：同样，我们也需要限制字体大小的最大值。例如，当字体过大时，字数可能会减少，页面的布局可能被打乱。
- 字体大小的逐层递增：在响应式设计中，通常需要将字体大小逐层递增，以适应不同设备的屏幕尺寸。例如，标题的字体大小通常会比正文的字体大小大一些。
CSS 实现字体大小适配
在进行响应式设计时，我们可以通过 CSS 来实现字体大小的适配。在本节中，我们将介绍一些常见的 CSS 技巧。
使用百分比设置字体大小
在 CSS 中，我们可以使用百分比来设置字体大小。例如，我们可以使用以下代码将一个元素的字体大小设置为基础字体大小的 150%：
p {
font-size: 150%;
}使用百分比来设置字体大小可以实现相对大小的调整，但是对于不同的设备，字体大小仍然可能会有所不同。
使用 rem 设置字体大小
在前面的内容中，我们提到了如何使用 em 和 dp 单位来实现字体大小的适配。使用 rem(相对于根元素的字体大小) 单位可以进一步简化这一过程。
在使用 rem 单位时，我们需要先为根元素设置字体大小，例如：
html {
font-size: /**/16px;
}接下来，我们可以使用以下代码设置字体大小：
p {
font-size: 1.5rem; /* 基础字体大小为 16px，倍数为 1.5 */
}在使用 rem 单位设置字体大小时，我们需要注意以下几个问题：
- 基础字体大小：根据不同的设计需求，我们可以设定不同的基础字体大小。通常情况下，基础字体大小为 16px 是一个比较合适的选择。
- 多层嵌套的字体大小：在多层嵌套的情况下，如果直接使用 rem 单位来设置字体大小，那么字体大小会不断地累加。为了避免这种情况，我们可以在根元素中设置基础字体大小为 10px，然后在元素中使用 rem 单位来设置字体大小。
html {
font-size: 62.5%; /* 设置根元素基础字体大小为 10px */
}
p {
font-size: 1.5rem; /* 基础字体大小为 10px，倍数为 1.5 */
}使用 vw 和 vh 设置字体大小
使用 vw(相对于视口宽度的比例) 和 vh(相对于视口高度的比例) 单位可以实现字体大小的自适应。例如，我们可以使用以下代码将一个元素的字体大小设置为视口高度的 10%：
p {
font-size: 10vh;
}使用 vw 和 vh 单位设置字体大小需要考虑以下两个问题：
- 视口宽度或高度的变化：在使用 vw 和 vh 单位设置字体大小时，需要考虑到视口宽度或高度的变化。有些设备可能会在横屏时将视口的高度变为宽度的一半，因此在使用这种方法时需要注意适配问题。
- 最大字体大小的限制：在使用 vw 和 vh 单位设置字体大小时，如果字体大小过大，可能会影响页面的布局。因此需要限制字体大小的最大值。
p {
font-size: min(10vh, 32px); /* 限制最大字体大小为 32px */
}结论
本文探讨了解决移动端响应式设计下字体大小问题的方法，包括计算字体大小和使用 CSS 实现适配。在进行响应式设计时，我们需要注意字体大小的限制和逐层递增。希望这篇文章对前端工程师理解响应式设计有所帮助。
示例代码
-- -------------------- ---- -------
-- --------- --
------ ------ --- ----------- ------ - -- -- --
---- -
---------- -----
-
-
------ ------ --- ----------- ------ - -- -- --
---- -
---------- -----
-
-
------ ------ --- ----------- ------- - -- --- --
---- -
---------- -----
-
-
-- ------------- --
---- -
---------- ------
-
---------- -
---------- -------
-
---------- ------ -
---------- -------
-
-- -- -- - -- ------ --
-- -
---------- ---------- - ------
-
-- -
---------- ---------- - ------
-
-- -
---------- ---------- - ------
-
- -
---------- -------- ------
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fb68c344713626015c8166