npm 包 @defy/postcss-px-to-viewport 使用教程

前言

在移动端开发中，由于不同设备的屏幕尺寸不同，使用固定的像素单位（px）来实现页面的布局，会导致在不同设备上显示效果不同，而使用相对单位（vw、vh）可以比较好地解决这一问题。但是，现在很多前端开发者已经习惯使用 px 作为单位来进行开发，这时候就需要使用到 @defy/postcss-px-to-viewport 这个 npm 包来自动将 px 转化为 vw 或者 vh。

安装

@defy/postcss-px-to-viewport 是一个 npm 包，可以通过 npm 或者 yarn 安装。

npm install @defy/postcss-px-to-viewport --save-dev

或者

yarn add @defy/postcss-px-to-viewport --dev

配置

安装完成后，我们需要在项目的 postcss 配置文件中添加 @defy/postcss-px-to-viewport 的配置。

在项目根目录下创建一个 postcss.config.js 文件，添加以下代码：

-- -------------------- ---- -------
-------------- - -
  -------- -
    ------------------------------- -
      -------------- ----- -- ----------- ----
      -------------- ---- -- --------------
      -------------- -- -- --------------
      --------- ------ -- ---------- -----------
      ------------- ----- -- ------
      ----------------- ----- -- ----------
      ------------------ --- -- ------ --- ------------
      -------------- -- -- ---- --- -----
      ----------- ----- -- ----------------- -----
    -
  -
-

使用

配置完成后，我们就可以在所有的 css 文件中使用 px 来进行布局了，@defy/postcss-px-to-viewport 会自动将 px 转化为 vw 或者 vh。

举个例子，在样式文件中我们可以这样写：

.demo {
  width: 750px;
  height: 300px;
  font-size: 24px;
}

转化后将会变成：

.demo {
  width: 100vw;
  height: 40vh;
  font-size: 3.2vw;
}

总结

通过 @defy/postcss-px-to-viewport 这个 npm 包，我们可以很方便地将项目中的 px 单位转化为 vw 或者 vh，减少在不同设备上的显示效果差异。同时，我们在配置的时候也可以灵活地配置不同的参数，以满足项目的需求。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668f5d9381d61a3540eae