什么是 hollys？
hollys 是一个用来处理前端项目根据设备屏幕大小动态调整字体大小的 npm 包。它提供了简单易用的 API，方便开发者在使用过程中能够快速实现该功能。
安装
npm install hollys --save
使用
先在你的项目中引入 hollys 包。
import hollys from 'hollys';
使用前首先需要为你的根标签设置 fontSize，这是基础。
html {
font-size: 16px;
/* 如果根据设备的宽度而动态变化，这里应该为vw单位 */
}接下来调用 API 即可实现字体大小的动态调整。例如，下面代码可以根据屏幕宽度为不同的元素设置字体大小，同时在屏幕大小发生变化时，动态调整。
-- -------------------- ---- -------
-------
-
-
--------- ---------
------- ---
------- ---
-------- ---
--
-
--------- ------------
------- ---
------- ---
-------- ---
--
--
---------- ----------
--API 说明
使用 hollys 函数需要传入两个参数：
一个对象数组，数组中每个对象是对应一种元素。对象属性如下所示。
属性 类型 说明 selector string 元素选择器 mobile number/string 移动端字体大小 tablet number/string 平板端字体大小 desktop number/string 桌面端字体大小 scale boolean 是否启用放大倍数 max number/string 字体最大值 min number/string 字体最小值 ratio number 宽高比，如 9/16=0.57 一个数组，数组中是设备类型，如下所示。
种类 说明 mobile 移动端 tablet 平板端 desktop 桌面端 mobile-tablet 移动端和平板端 mobile-desktop 移动端和桌面端
示例
下面的代码片段演示了如何使用 hollys 来调整不同设备上的字体大小。
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
------------- ----------
-------
---- -
---------- -----
-
------ -
------------ -----
----------- -------
-
--------- -
------ ------
-
--------
-------
------
--- ---------------- ------ -------------
-- ----------------------- ------ --- -----
------- --------------------------
-------
--------- -------------------- ---- -------
------ ------ ---- ---------
-------
-
-
--------- ---------
------- ---
------- ---
-------- ---
--
-
--------- ------------
------- ---
------- ---
-------- ---
--
--
---------- ----------
--总结
通过使用 hollys，我们可以更加简单地实现前端项目根据设备屏幕大小动态调整字体大小的需求。hollys 提供的 API 非常简单易用，只需要在项目中引用，调用 API 即可实现字体大小的动态调整。同时，适当地调整字体大小还能够提升网站的可读性，提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d4281e8991b448db0ed