Vue 93 ，前端自适应布局：使用 postcss-px-to-viewport 实现网页适配，PC端网页适配（ px转vw，postcss.config.js文件配置）

北城笑笑

已于 2025-03-28 17:48:02 修改

阅读量2.5k

点赞数 32

分类专栏： Vue 前端开发文章标签：前端 vue.js postcss

于 2025-02-19 07:30:00 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_65793170/article/details/145605109

版权

Vue 同时被 2 个专栏收录

89 篇文章

订阅专栏

前端开发

8 篇文章

订阅专栏

前言

在当今的前端开发中，网页需要在各种不同尺寸的设备上完美显示，这就要求我们采用有效的自适应布局方案。postcss-px-to-viewport 是一个强大的 PostCSS 插件，它可以帮助我们将 CSS 中的 px 单位自动转换为视口单位（如 vw），从而实现网页的自适应布局。这里来详细介绍下如何使用 postcss-px-to-viewport 插件，并结合 Vue 项目进行实际操作。

一. 配置详解

我们都知道 postcss-px-to-viewport 是一个 PostCSS 插件，旨在将 CSS 中的 px 单位自动转换为视口宽度单位（vw），以便于实现响应式设计。这对于希望基于视口大小而不是固定的像素值来调整页面元素尺寸的设计者和开发者来说非常有用。通过使用这个插件，可以更轻松地创建在不同设备上都具有良好显示效果的网页。

首先，我们来看一下 postcss-px-to-viewport 插件的配置文件：

module.exports = {
  plugins: {
    "postcss-px-to-viewport": {
      unitToConvert: "px", // 需要转换的单位，默认为"px"
      viewportWidth: 1920, // 设计稿的视口宽度
      unitPrecision: 5, // 单位转换后保留的精度
      propList: ["*"], // 能转化为vw的属性列表
      viewportUnit: "vw", // 希望使用的视口单位
      fontViewportUnit: "vw", // 字体使用的视口单位
      selectorBlackList: [], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
      minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
      mediaQuery: false, // 媒体查询里的单位是否需要转换单位
      replace: true, //  是否直接更换属性值，而不添加备用属性
      exclude: undefined, // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
      include: undefined, // 如果设置了include，那将只有匹配到的文件才会被转换
      landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
      landscapeUnit: "vw", // 横屏时使用的单位
      landscapeWidth: 1920, // 横屏时使用的视口宽度
    },
  },
};

配置参数解析：

unitToConvert：指定需要转换的单位，默认是 px。如果你想将其他单位转换为视口单位，可以修改这个值。
viewportWidth：设计稿的视口宽度，这个值是根据设计稿的实际宽度来设置的。例如，如果设计稿是按照 1920px 的宽度设计的，那么就将这个值设置为 1920。
unitPrecision：单位转换后保留的精度，即小数点后的位数。这里设置为 5，表示转换后的视口单位会保留 5 位小数。
propList：能转化为视口单位的属性列表。["*"] 表示所有属性都可以转换。如果你只想转换某些特定的属性，可以在这里指定，例如 ["width", "height"]。
viewportUnit：希望使用的视口单位，通常是 vw 或 vh。这里选择 vw，表示根据视口宽度进行转换。
fontViewportUnit：字体使用的视口单位，同样可以选择 vw 或 vh。
selectorBlackList：需要忽略的 CSS 选择器，这些选择器下的属性不会转换为视口单位，仍然使用原有的 px 等单位。例如，如果你不想转换 .el 类下的属性，可以将 selectorBlackList 设置为 [".el"]。
minPixelValue：设置最小的转换数值，如果为 1 的话，只有大于 1 的 px 值才会被转换。
mediaQuery：布尔值，表示媒体查询里的单位是否需要转换。这里设置为 false，表示媒体查询里的单位不进行转换。
replace：布尔值，是否直接更换属性值，而不添加备用属性。设置为 true 表示直接替换，设置为 false 会保留原有的 px 属性并添加转换后的视口单位属性。
exclude：忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件。可以使用正则表达式来指定需要忽略的文件路径。
include：如果设置了 include，那么只有匹配到的文件才会被转换。同样可以使用正则表达式来指定需要转换的文件路径。
landscape：布尔值，是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)。
landscapeUnit：横屏时使用的单位，通常与 viewportUnit 保持一致。
landscapeWidth：横屏时使用的视口宽度，一般与 viewportWidth 相同。

二. 安装依赖

在使用 postcss-px-to-viewport 插件之前，我们需要先安装相关的依赖。打开终端，在项目根目录下运行以下命令：

npm install postcss postcss-px-to-viewport --save-dev

安装命令解析：

安装的插件数量：这个命令一次性安装了两个插件，分别是 postcss 和 postcss-px-to-viewport。
安装环境：使用 --save-dev 标志（简写为 -D）将这两个插件安装到项目的开发环境中。开发环境是指开发人员在开发项目时所使用的环境，主要用于代码编写、调试和测试等工作。这两个插件在项目构建过程中对 CSS 文件进行处理，将 px 单位转换为视口单位，所以属于开发依赖。安装完成后，它们会被添加到项目的 package.json 文件的 devDependencies 字段中，例如：

{
    "devDependencies": {
        "postcss": "^x.x.x",
        "postcss-px-to-viewport": "^x.x.x"
    }
}

三. 具体使用

在 Vue 项目中使用 postcss-px-to-viewport

1. 创建 `postcss.config.js` 文件

在项目根目录下创建一个 postcss.config.js 文件，并将上述配置代码复制到该文件中。这个文件是专门用来配置 PostCSS 插件的，PostCSS 会自动读取这个文件的配置。

// postcss.config.js
module.exports = {
  plugins: {
    "postcss-px-to-viewport": {
      unitToConvert: "px",
      viewportWidth: 1920,
      unitPrecision: 5,
      propList: ["*"],
      viewportUnit: "vw",
      fontViewportUnit: "vw",
      selectorBlackList: [],
      minPixelValue: 1,
      mediaQuery: false,
      replace: true,
      exclude: undefined,
      include: undefined,
      landscape: false,
      landscapeUnit: "vw",
      landscapeWidth: 1920
    }
  }
};

// 注释
module.exports = {
  plugins: {
    "postcss-px-to-viewport": {
      unitToConvert: "px", // 需要转换的单位，默认为"px"
      viewportWidth: 1920, // 设计稿的视口宽度
      unitPrecision: 5, // 单位转换后保留的精度
      propList: ["*"], // 能转化为vw的属性列表
      viewportUnit: "vw", // 希望使用的视口单位
      fontViewportUnit: "vw", // 字体使用的视口单位
      selectorBlackList: [], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
      minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
      mediaQuery: false, // 媒体查询里的单位是否需要转换单位
      replace: true, //  是否直接更换属性值，而不添加备用属性
      exclude: undefined, // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
      include: undefined, // 如果设置了include，那将只有匹配到的文件才会被转换
      landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
      landscapeUnit: "vw", // 横屏时使用的单位
      landscapeWidth: 1920, // 横屏时使用的视口宽度
    },
  },
};

2. 编写 CSS 代码

在 Vue 组件中编写 CSS 代码时，直接使用 px 单位即可。例如，在一个 .vue 文件中：

<template>
  <div class="example">
    这是一个示例
  </div>
</template>

<style scoped>
.example {
  width: 200px;
  height: 100px;
  font-size: 16px;
}
</style>

3. 运行或构建项目

当你运行开发服务器（npm run serve）或者进行项目构建（npm run build）时，postcss-px-to-viewport 插件会自动把 CSS 里的 px 单位转换为 vw 单位。转换后的 CSS 代码可能如下：

.example {
  width: 10.41667vw;
  height: 5.20833vw;
  font-size: 0.83333vw;
}

实际效果：

四. 代码逻辑

整体代码逻辑实现流程：

安装依赖：使用 npm install postcss postcss-px-to-viewport --save-dev 命令安装所需的插件。
配置插件：在 postcss.config.js 文件中配置 postcss-px-to-viewport 插件的参数，根据项目需求调整各个参数的值。
编写 CSS 代码：在 Vue 组件或 CSS 文件中使用 px 单位编写样式。
构建项目：运行开发服务器或进行项目构建，PostCSS 会读取 postcss.config.js 文件的配置，调用 postcss-px-to-viewport 插件对 CSS 文件进行处理，将 px 单位转换为视口单位。

五. 注意事项

文件路径：确保 postcss.config.js 文件位于项目根目录下，这样 PostCSS 才能正确读取配置。
兼容性：虽然 vw 单位在现代浏览器中得到了广泛支持，但在一些旧版本浏览器中可能存在兼容性问题。你可以根据项目需求，考虑使用 autoprefixer 等插件来处理兼容性。
选择器黑名单：如果项目中使用了一些第三方 UI 框架，为了避免这些框架的样式被错误转换，可以将相关的选择器添加到 selectorBlackList 中。
转换精度：unitPrecision 参数设置的转换精度可能会影响页面的显示效果，需要根据实际情况进行调整。

通过以上步骤，你就可以在 Vue 项目中使用 postcss-px-to-viewport 插件实现网页的自适应布局，让网页在不同尺寸的设备上都能完美显示。希望本文对你有所帮助！

六. 本文总结

这里通过 postcss-px-to-viewport 插件在前端自适应布局的应用。先详解插件配置参数，如转换单位、视口宽度等。接着介绍安装 postcss 和 postcss-px-to-viewport 到开发环境的命令。以 Vue 项目为例，阐述使用步骤及代码转换逻辑。最后点明使用注意事项，如文件路径、兼容性等，帮助我们实现网页自适应。