前言
在移动端开发中，由于不同设备的屏幕尺寸不同，使用固定的像素单位（px）来实现页面的布局，会导致在不同设备上显示效果不同，而使用相对单位（vw、vh）可以比较好地解决这一问题。但是，现在很多前端开发者已经习惯使用 px 作为单位来进行开发，这时候就需要使用到 @defy/postcss-px-to-viewport 这个 npm 包来自动将 px 转化为 vw 或者 vh。
安装
@defy/postcss-px-to-viewport 是一个 npm 包，可以通过 npm 或者 yarn 安装。
--- ------- ---------------------------- ----------
或者
---- --- ---------------------------- -----
配置
安装完成后，我们需要在项目的 postcss 配置文件中添加 @defy/postcss-px-to-viewport 的配置。
在项目根目录下创建一个 postcss.config.js 文件，添加以下代码：
-------------- - -
-------- -
------------------------------- -
-------------- ----- -- ----------- ----
-------------- ---- -- --------------
-------------- -- -- --------------
--------- ------ -- ---------- -----------
------------- ----- -- ------
----------------- ----- -- ----------
------------------ --- -- ------ --- ------------
-------------- -- -- ---- --- -----
----------- ----- -- ----------------- -----
-
-
-使用
配置完成后，我们就可以在所有的 css 文件中使用 px 来进行布局了，@defy/postcss-px-to-viewport 会自动将 px 转化为 vw 或者 vh。
举个例子，在样式文件中我们可以这样写：
----- - ------ ------ ------- ------ ---------- ----- -
转化后将会变成：
----- - ------ ------ ------- ----- ---------- ------ -
总结
通过 @defy/postcss-px-to-viewport 这个 npm 包，我们可以很方便地将项目中的 px 单位转化为 vw 或者 vh，减少在不同设备上的显示效果差异。同时，我们在配置的时候也可以灵活地配置不同的参数，以满足项目的需求。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600668f5d9381d61a3540eae