在前端开发中，我们常常需要根据容器的大小动态地设置文本的字体大小，以保证在不同设备上都能够合适地展示。本文将介绍一些实现这一效果的方法。
方法一：使用 JavaScript
使用 JavaScript 可以非常方便地获取到容器的大小，并计算出合适的字体大小。以下是一个简单的示例：
-- -------------------- ---- -------
---- ---------------
-------------------------
------
--------
--- --------- - -------------------------------------
--- - - -----------------------------
-- --------
--- -------- - ----------------------------------------------
-- --------
-------- -------- -
--- ----- - ----------------------
--- ----- - ----- - ---- -- ------------
---------------- - -------- - ----- - -----
-
--------------------------------- --------
---------
---------这段代码会在页面加载时计算出 p 元素的初始字体大小，并通过 window.addEventListener('resize', resize) 监听窗口大小变化事件，动态调整字体大小。
方法二：使用 CSS 的 calc() 函数
CSS 的 calc() 函数可以让我们使用简单的数学运算来计算样式属性的值。结合 CSS3 中新增的 vw 和 vh 单位，我们可以很容易地根据容器大小设置字体大小。以下是一个示例：
-- -------------------- ---- -------
---- ------------------
-------------------------
------
-------
---------- -
------ -----
------- -----
-------- ----
---------- -------- - -----
-
--------这段代码会将容器的宽度设置为视口宽度的 80%，高度设置为视口高度的 50%，内边距设置为视口宽度的 5%，并根据视口宽度和高度计算出合适的字体大小。
总结
以上是两种根据容器大小设置字体大小的方法，分别使用了 JavaScript 和 CSS 的特性来实现。在实际开发中，我们可以根据具体情况选择合适的方法，并根据需求进行调整。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11713
