vue3使用postcss-px-to-viewport适配屏幕

前言

本教程只使用于vue3+vue-cli5创建的项目，说白了就是使用的webpack环境，不适用于vite，后面会更新。
因为技术总是更新迭代，大多数博主都没有习惯写上自己的配置，总是把一段自认为可以的配置贴出来，很多时候看了不仅误人子弟，还耽误很多开发时间，我，致力于做一个负责人的博主，都会贴出配置和使用环境，方便大家做参考。

使用环境

安装

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

yarn add postcss-px-to-viewport --save-dev

pnpm add postcss-px-to-viewport --save-dev
1
2
3
4
5

如果devserver正在运行，安装完成以后记得重启devserver。

配置

在项目根目录下创建 postcss.config.js 文件，并填入一下内容：

module.exports = {
  plugins: {
    // ...
    'postcss-px-to-viewport': {
      // options
      unitToConvert: "px",
      viewportWidth: 1920,
      viewportHeight:1080,
      unitPrecision: 3,
      propList: [
        "*"
      ],
      viewportUnit: "vw",
      fontViewportUnit: "vw",
      selectorBlackList: [],
      minPixelValue: 1,
      mediaQuery: false,
      replace: true,
      exclude: /(\/|\\)(node_modules)(\/|\\)/,
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

重新运行，打开浏览器查看属性值已经变为vw计算，就是这么简单。

附上插件的github地址： https://github.com/evrone/postcss-px-to-viewport

配置说明

结语

以上就是本次分享的全部内容了，致力于做一个有态度的前端！您的支持就是我的动力，请多多点赞！收藏！留言！