postcss-px-to-viewport 实现页面自适应

 简介

postcss-px-to-viewport 是一个 PostCSS 插件，它可以将 px 单位转换为视口单位（vw、vh）。

视口单位是相对于视口尺寸来计算的长度单位，而不是相对于父元素或根元素。这意味着使用视口单位进行布局和样式设置时，元素会随着屏幕尺寸的变化而自适应。

应用场景

在移动端开发中，我们通常使用 viewport 来适配不同的屏幕尺寸。但是，在实际开发中，我们经常遇到以下问题：
在不同屏幕尺寸下显示效果不一致。
在高分辨率屏幕上，元素过小或过大。
使用 rem 单位存在兼容性问题。
因此，我们需要一种更加智能、灵活的单位来解决这些问题。而 postcss-px-to-viewport 就是解决这个问题的好方案

vue3应用

命令引入node包

npm install postcss-px-to-viewport -D 

在vite.config.js或vite.config.ts文件中进行配置

 
import vue from '@vitejs/plugin-vue'
// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import postcsspxtoviewport from 'postcss-px-to-viewport'
export default defineConfig({
  // ...
  plugins: [
    vue(),
  ],
    //在这配置插件内容
   css: {
      postcss: {
        plugins: [
          postcsspxtoviewport({
            // 要转化的单位
            unitToConvert: 'px',
            // UI设计稿的大小
            viewportWidth: 1920,
            // 转换后的精度
            unitPrecision: 6,
            // 转换后的单位
            viewportUnit: 'vw',
            // 字体转换后的单位
            fontViewportUnit: 'vw',
            // 能转换的属性，*表示所有属性，!border表示border不转
            propList: ['*'],
            // 指定不转换为视窗单位的类名，
            selectorBlackList: ['ignore-'],
            // 最小转换的值，小于等于1不转
            minPixelValue: 1,
            // 是否在媒体查询的css代码中也进行转换，默认false
            mediaQuery: false,
            // 是否转换后直接更换属性值
            replace: true,
            // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
            exclude: [],
            // 包含那些文件或者特定文件
            include: [],
            // 是否处理横屏情况
            landscape: false
          }),
        ]
      }
    }
})

vue2

在vue.config.js文件中进行配置

 css: {
    loaderOptions: {
      sass: {
        sassOptions: { outputStyle: "expanded" },
      },
      postcss: {
        plugins: [
          require("postcss-px-to-viewport")({
            viewportWidth: "1920", // 视窗的宽度，对应设计稿的宽度
            // viewportHeight: "1080", // 视窗的高度
            unitPrecision: 5, // 指定px转换为视窗单位值的小数位数(因为无法整除)
            viewportUnit: "vw", // 指定需要转换成的视窗单位，使用vw
            selectorBlackList: [], // 指定不转换为视窗单位的类
            minPixelValue: 1, // 小于或等于1px不转换为视窗单位
            mediaQuery: false, // 允许在媒体查询中转换px
            exclude: /(\/|\\)(node_modules)(\/|\\)/, // 不包含node_modules文件
          }),
        ],
      },
    },
  },