在 web 开发中，我们通常需要考虑各种屏幕尺寸和设备类型，从而确保我们的网站在各种设备上都能正常显示和良好交互。而其中一个重要的方面是元素的尺寸和布局，因此我们需要一种自适应尺寸的解决方案，这就是我们要介绍的 npm 包 poly-fluid-sizing。
什么是 poly-fluid-sizing？
poly-fluid-sizing 是一个可以流式自适应调整 HTML 元素大小的工具库。它可以帮助我们快速、方便地处理浏览器窗口大小的变化、设备方向的变化以及不同设备的 DPI（每英寸点数）和像素密度。
这个库支持的浏览器非常广泛，包括移动端的 Safari、微信内置浏览器、Chrome、Firefox 等等。并且，它的体积非常小，只有几百个字节。
安装和使用
poly-fluid-sizing 可以通过 npm 仓库进行安装：
npm install poly-fluid-sizing --save
在我们的项目中引入该库：
import fluidSizing from 'poly-fluid-sizing';
我们需要给需要被自适应的元素添加 data-fluid 属性，如下所示：
<div style="width: 50%; background-color: #f00;" data-fluid>Fluid sizing!</div>
然后，我们在 JavaScript 中启用它：
fluidSizing();
这将会自动调整所有添加了 data-fluid 属性的元素的大小，根据它们在页面中的位置和浏览器窗口的大小。
由于 poly-fluid-sizing 依赖于 ResizeObserver API，因此我们需要确保浏览器支持 ResizeObserver，否则 poly-fluid-sizing 将无法运行。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----------- ------------ ------------
------- --------------
------ ----------- ---- --------------------
--------------
---------
-------
--- -
------ -----
-------- -----
---------------- -------
------------ -------
---------- -------
------------ -----
------- -----
----------------- -----
-
-- --- ----- -- --
--------------- -
------ ----
-
--------
-------
------
---- ---------------------------- ----------
----------- --- -------
----------- --- -------
-------
-------在上面的示例中，我们给第一个 div 元素添加了 data-fluid 属性，并设置了它的宽度为 50%。这将使它根据浏览器大小自适应调整。
结语
poly-fluid-sizing 可以让我们更轻松地处理元素自适应问题。不过，我们也需要注意到，自适应也要有度，过度的自适应可能会导致一些不必要的布局问题。我们需要在设计上兼顾自适应和美观，获得更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562a481e8991b448dfdb6