postcsspxtoviewport根据不同属性转vw和vh

根据不同的属性转vw和vh，

例如： width、margin-left、padding-left … 转为vw

height、margin-top、line-height … 转为vh

实现这一效果，主要通过插件的propList属性，这里以vite为例

目前postcsspxtoviewport插件已经被弃用,

建议使用postcsspxtoviewport8plugin插件, 用法无变化, 且新增了incloud属性(只匹配部分文件)

yarn add postcss-px-to-viewport-8-plugin -D
// 或
npm install postcss-px-to-viewport-8-plugin -D

vite.config.ts文件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import postcsspxtoviewport8plugin from 'postcss-px-to-viewport-8-plugin'

export default defineConfig({
  ...
  css: {
    postcss: {
      plugins: [
        // 处理属性转vw的情况
        postcsspxtoviewport8plugin({
            unitToConvert: 'px', // 要转化的单位
            viewportWidth: 1920, // UI设计稿的宽度
            unitPrecision: 6, // 转换后的精度，即小数点位数
            propList: [
              'width',
              'left',
              'right',
              'font-size',
              'margin-left',
              'margin-right',
              'text-indent',
              'padding-left',
              'padding-right',
              'padding',
            ], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
            viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
            fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
            selectorBlackList: ['ignore-'], // 指定不转换为视窗单位的类名
            minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
            mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
            replace: true, // 是否转换后直接更换属性值
            exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
            // exclude: [],
            include: [
                /\/src\/pages\/amap\/factor-monitor.vue/,
            ],
            landscape: false, // 是否处理横屏情况
        }),
        // 处理属性转vh的情况
        postcsspxtoviewport8plugin({
            unitToConvert: 'px', // 要转化的单位
            viewportWidth: 1080, // UI设计稿的宽度
            unitPrecision: 6, // 转换后的精度，即小数点位数
            propList: [
              'height',
              'top',
              'bottom',
              'margin-top',
              'margin-bottom',
              'padding-top',
              'padding-bottom',
              'line-height',
            ], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
            viewportUnit: 'vh', // 指定需要转换成的视窗单位，默认vw
            fontViewportUnit: 'vh', // 指定字体需要转换成的视窗单位，默认vw
            selectorBlackList: ['ignore-'], // 指定不转换为视窗单位的类名
            minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
            mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
            replace: true, // 是否转换后直接更换属性值
            exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
            // exclude: [],
            include: [
              /\/src\/pages\/amap\/factor-monitor.vue/,
            ],
            landscape: false, // 是否处理横屏情况
        })
      ]
    }
  }
})

如果postcss不是写在vite.config.ts中，而是单拎出来的情况，写法一致

postcss.config.ts

import postcsspxtoviewport8plugin from 'postcss-px-to-viewport-8-plugin'
import autoprefixer from 'autoprefixer'
import tailwindcss from 'tailwindcss'

export default {
  plugins: [
    tailwindcss(),
    autoprefixer(),
    // 配置px转视口单位, 为了宽高100%适应, 这里将width之类的转为vw, height之类的转为vh
    postcsspxtoviewport8plugin({
      unitToConvert: 'px', // 要转化的单位
      viewportWidth: 1920, // UI设计稿的宽度
      unitPrecision: 6, // 转换后的精度，即小数点位数
      propList: [
        'width',
        'left',
        'right',
        'font-size',
        'margin-left',
        'margin-right',
        'text-indent',
        'padding-left',
        'padding-right',
      ], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
      viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
      fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
      selectorBlackList: ['ignore-'], // 指定不转换为视窗单位的类名
      minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
      mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
      replace: true, // 是否转换后直接更换属性值
      exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
      // exclude: [],
      // include: [
      //     /\/src\/pages\/amap\/factor-monitor.vue/,
      // ],
      landscape: false, // 是否处理横屏情况
    }),
    postcsspxtoviewport8plugin({
      unitToConvert: 'px', // 要转化的单位
      viewportWidth: 1080, // UI设计稿的宽度
      unitPrecision: 6, // 转换后的精度，即小数点位数
      propList: [
        'height',
        'top',
        'bottom',
        'margin-top',
        'margin-bottom',
        'padding-top',
        'padding-bottom',
        'line-height',
      ], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
      viewportUnit: 'vh', // 指定需要转换成的视窗单位，默认vw
      fontViewportUnit: 'vh', // 指定字体需要转换成的视窗单位，默认vw
      selectorBlackList: ['ignore-'], // 指定不转换为视窗单位的类名
      minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
      mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
      replace: true, // 是否转换后直接更换属性值
      exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
      // exclude: [],
      // include: [
      //     /\/src\/pages\/amap\/factor-monitor.vue/,
      // ],
      landscape: false, // 是否处理横屏情况
    }),
  ]
}

vite6将弃用cjs（CommonJS ）采用ESM（ESModule），所有的js文件将编译为ESM语法，所以我这里postcss.config.ts使用ESM语法引入和导出，请视自身项目情况进行更改，参考 https://cn.vitejs.dev/guide/troubleshooting

原文地址：https://blog.csdn.net/qq_33982898/article/details/136763222

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！