在前端开发中，响应式设计是一个必须要考虑的问题，而 CSS 的单位是一个非常关键的部分。Viewport units 就是一种能够帮助我们更好地处理响应式设计的 CSS 单位。其中，postcss-viewport-units 就是一个非常实用的 npm 包。
什么是 postcss-viewport-units？
postcss-viewport-units 是一个基于 postcss 的插件，它可以将 CSS 文件中的 px 单位转换为相应的视口单位（如vw、vh、vmin 和 vmax 等）。通过这个插件，我们可以在写 CSS 的时候，直接用视口单位来代替 px 单位，从而实现响应式设计。
安装
首先，我们需要在项目中安装 postcss：
npm install postcss --save-dev
然后，在项目中安装 postcss-viewport-units：
npm install postcss-viewport-units --save-dev
使用方法
使用 postcss-viewport-units 很简单，我们只需要在 postcss.config.js 文件中引入它，并将其作为 postcss 的一个插件即可。
postcss.config.js：
-- -------------------- ---- -------
-------------- - -
-------- -
-----------------------------------
------------ ---- -- -------------------------------
-------------- --
---------- -----
-------------- --
--------------- -----
-------------- -----
----------------- --
---
-
-在这个配置文件中，我们可以配置 postcss-viewport-units 的参数。具体参数说明如下：
filterRules：可以用来筛选你想要转换的规则，这里我们只转换以 rui- 开头的 CSS 选择器。decimalPlaces：设置视口单位的小数位数。forceCalc：是否强制使用 calc() 函数包装所有计算出的视口单位值（默认为 true）。unitPrecision：单位精度。viewportHeight：视口高度。viewportWidth：视口宽度。ignoreProperties：要忽略的属性列表。
示例
下面是一个示例，演示如何使用 postcss-viewport-units 来实现响应式设计。
index.html：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------ ------------------------------
----- ---------------- -------------------
-------
------
---- ----------------------
---- -------------- ------------- -------
---- -------------- ------------- -------
---- -------------- ------------- -------
------
-------
-------index.css：
-- -------------------- ---- -------
-------------- -
-------- -----
---------- -----
---------------- -------
-
-------- -
-------- -----
---------------- -------
------------ -------
------ -----
---------- -----
------- ------
------- -----
------ ------
-
--------- -
----------------- -----
---------- -----
-
--------- -
----------------- -----
---------- -----
-
--------- -
----------------- -----
---------- -----
-
------ ----------- ------ -
-------------- -
--------------- -------
------------ -------
-
-------- -
------ -----
---------- ----
-
--------- -
------- -----
-
--------- -
------- -----
-
--------- -
------- -----
-
-在上面的示例中，我们定义了一个名为 rui-container 的容器，它包含了三个名为 rui-box1、rui-box2 和 rui-box3 的盒子。在这个示例中，我们使用了大量的 CSS 视口单位来代替 px 单位，从而实现了响应式设计。
最后，我们再在命令行中执行以下命令，来实时编译我们的 CSS 文件：
npx postcss index.css -o index-compiled.css --watch
现在，我们就可以在浏览器中预览我们的响应式网站了。
总结
使用 postcss-viewport-units 可以大大简化我们的响应式设计工作，而且它的使用也非常简单、灵活。希望这篇文章对大家有所帮助，也希望大家能够善加利用这个工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66269