在前端开发中，响应式设计是不可避免的话题。而在响应式设计中，单位的选择尤为重要。相信使用过 rem 和 em 单位的同学对它们的使用情况有一定的熟悉，但是，在实际开发中，仍然有非常多的同学选择使用 px 单位。这时，就需要用到本文要介绍的 npm 包 px2vw 了。
什么是 px2vw？
px2vw 是一个 npm 包，它可以将 px 单位转换为 vw 单位，这可能是前端开发中最流行的单位了。vw 单位相对于 px 单位更加灵活，可以自适应屏幕的宽度、支持响应式设计。不仅如此，使用 vw 单位的样式可以更加统一和整洁，不需要多余的计算和转换。
如何使用 px2vw？
好了，接下来我们就来探究一下如何使用 px2vw 这个 npm 包。
1. 安装
你可以使用 npm 或者 yarn 进行安装。
npm install px2vw --save-dev # 或 yarn add px2vw -D
2. 引入
在项目需要的地方引入 px2vw，如果你是使用的模块化开发，可以这样：
import px2vw from 'px2vw';
如果是在 HTML 文件中使用，可以在 HTML 文件中引用：
<script src="./node_modules/px2vw/index.js"></script>
3. 配置
在使用 px2vw 的时候，你需要先进行配置。px2vw 有两种配置方式。
3.1 使用默认配置
默认配置如下：
-- -------------------- ---- ------- - -------------- ----- -------------- ---- -------------- -- --------- ------ ------------- ----- ----------------- ----- ------------------ --- -------------- -- ----------- ------ -------- ----- -------- ---------- -------- ---------- ---------- ------ -------------- ----- --------------- --- -
直接将 px2vw 导入进去即可，不需要传递任何参数。如果你对于这些配置不太了解，可以直接使用默认配置。
import px2vw from 'px2vw';
在使用过程中，你只需要将样式中需要转化的 px 单位使用 px2vw，如下所示：
div {
width: px2vw(100);
height: px2vw(50);
font-size: px2vw(16);
}这样，你的页面上就可以看到，所有需要被转换的 px 单位已经被转化成了 vw 单位。
3.2 自定义配置
如果你在使用默认配置的过程中，需要对一些参数进行自定义的话，你可以按照如下的方式进行：
-- -------------------- ---- -------
------ ----- ---- --------
----- ------- - -
-------------- -----
-------------- ----
-------------- --
--------- ------
------------- -----
----------------- -----
------------------ ---
-------------- --
----------- ------
-------- -----
-------- ----------
-------- ----------
---------- ------
-------------- -----
--------------- ---
-
----- ------------- - ---------------
-----------------------
--- -
------ ------
------- -----
---------- -----
-
---在上面的例子中，我们通过传入的 options 对 px2vw 进行了自定义。而在实际使用中，调用了 process 方法，将需要被转化的样式进行了传递。
4. 注意事项
使用 px2vw 进行 px 到 vw 转换时，需要注意以下几点：
- px2vw 仅适用于纵向，不适用于横向（即 landscape: false，在使用默认配置的情况下）。
- 注意选择合适的基准值。viewportWidth 即为转换基准值，表示设计稿的宽度。需要将设计稿的宽度转化为 px 像素值，如设计稿为 750px，则 viewportWidth 为 750。
- 注意 css 的权重，尤其是对于可选参数 propList 和 selectorBlackList 的配置需要加以关注。尤其要注意修改 font-size 和 line-height 等的值时需要谨慎，可能会导致排版的问题。
总结
好了，本文刚刚为大家介绍了 px2vw npm 包的使用，以及它的作用和注意事项。希望这篇文章能给你带来帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5e51ab1864dac6712a