plastic-aspect-ratio 是一个基于 CSS3 实现的能够自适应比例的 UI 库。它通过绑定相关的 HTML 元素来计算元素中子元素的高度，以达到自适应比例的效果。本文将为大家详细介绍 plastic-aspect-ratio 的使用方法。
安装
使用 plastic-aspect-ratio 前，需要先进行安装。通过 npm 可以非常方便地安装该 npm 包，命令如下：
npm install plastic-aspect-ratio
引入
完成安装后，在 HTML 文件中引入 plastic-aspect-ratio 的 CSS 文件即可，如下：
<link rel="stylesheet" href="node_modules/plastic-aspect-ratio/dist/plastic-aspect-ratio.css">
使用
plastic-aspect-ratio 主要提供了两种模式来适应容器的尺寸变化，即 最大化模式 和 最小化模式。我们来分别介绍一下这两种模式的使用方法。
最大化模式
在最大化模式下，元素的高度将会最大化以顶满容器，同时根据元素的宽高比例计算相应的宽度。使用最大化模式，需要在元素上添加 par-max 样式类。
HTML 代码示例：
<div class="par-max">
<div class="par-ratio-16-9">
<!-- 这里是子元素 -->
</div>
</div>在上面的示例中，父元素使用 par-max 样式类来启用最大化模式，子元素使用 par-ratio-16-9 样式类来设置宽高比例为 16:9。当父元素的尺寸发生变化时，子元素的高度将会自适应变化。
最小化模式
在最小化模式下，元素的宽度将会最小化以适应容器的尺寸，同时根据元素的宽高比例计算相应的高度。使用最小化模式，需要在元素上添加 par-min 样式类。
HTML 代码示例：
<div class="par-min">
<div class="par-ratio-4-3">
<!-- 这里是子元素 -->
</div>
</div>在上面的示例中，父元素使用 par-min 样式类来启用最小化模式，子元素使用 par-ratio-4-3 样式类来设置宽高比例为 4:3。当容器的尺寸变小时，子元素将会自动调整高度和宽度以保证宽高比例不变。
除了以上的两种模式外，plastic-aspect-ratio 还提供了其他一些相关的样式类和工具类，具体请参考官方文档。
示例代码
为了方便大家理解 plastic-aspect-ratio 的使用方法，下面给出一个完整的示例代码。这个示例展示了一个自适应比例的视频播放器，它会随着浏览器窗口的大小变化而自动调整比例。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------------
----- ---------------- -----------------------------------------------------------------------
-------
-------- -
------ -----
----------- ------
------- - -----
-
--------------- -
----------------- ------
------ ------
----------- -------
-
--------------- ----- -
------ -----
-
--------
-------
------
---- ----------------
---- -----------------------
------ --------------- -----------------
------
------
------- ----------------------
-------
-------在上面的示例中，我们在 div 元素上添加了 par-max 样式类来启用最大化模式，然后在内层 div 元素上添加了 par-ratio-16-9 样式类来设置宽高比例为 16:9。最后，我们在 video 元素上设置了 width: 100%，以确保其宽度与容器相同。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f82238a385564ab6be0