Vue3 + ts + Vite 不同屏适配：px 转 vw

1. 下载插件

npm i postcss-px-to-viewport autoprefixer amfe-flexible --save-dev

2. 配置

    （1）在 main.ts 导入依赖

import 'amfe-flexible/index.js'

    （2）在项目根目录下编写配置文件 postcss.config.cjs

module.exports = {
    plugins: {
        autoprefixer: {
            overrideBrowserslist: [
                "Android 4.1",
                "iOS 7.1",
                "Chrome > 31",
                "ff > 31",
                "ie >= 8",
                "last 10 versions", // 所有主流浏览器最近10版本用
            ],
            grid: true,
        },
        'postcss-px-to-viewport': {
            unitToConvert: 'px', // 需要转换的单位，默认为"px"
            viewportWidth: 1920, // 设计稿的视窗宽度
            unitPrecision: 6, // 单位转换后保留的精度
            propList: ['*'], // 能转化为 vw 的属性列表
            viewportUnit: 'vw', // 希望使用的视窗单位
            fontViewportUnit: 'vw', // 字体使用的视窗单位
            selectorBlackList: ['ignore-'], // 需要忽略的 CSS 选择器，不会转为视窗单位，使用原有的 px 等单位
            minPixelValue: 1, // 设置最小的转换数值，如果为 1 的话，只有大于 1 的值会被转换
            mediaQuery: false, // 媒体查询里的单位是否需要转换单位
            replace: true, // 是否直接更换属性值，而不添加备用属性
            exclude: [], // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
            include: /\/src\//, // 如果设置了include，那将只有匹配到的文件才会被转换
            landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件
            landscapeUnit: 'vw', // 横屏时使用的单位
            landscapeWidth: 1920 // 横屏时使用的视窗宽度
        }
    }
}

3. 重启项目

【注】上述方案对行内样式不生效，行内样式中 px 转 vw 可使用自定义方法实现

1. 编写函数 utils/pxToVw.ts

/* 行内样式 px 转 vw */
export function pxToVw(px: number): string {
    const vw = (px / 1920) * 100; // 假设设计稿宽度为 1920 px
    return `${vw}vw`;
}

export function pxToVwFromString(pxString: string): string {
    const pxValue = parseFloat(pxString); // 提取数字部分
    return pxToVw(pxValue); // 调用 pxToVw 函数
}

2. 使用

    对于方法1 pxToVw：

<div :style="{width: pxToVw(30)}"> test </div>

    对于方法2 pxToVwFromString：

<template>

    <div :style="{width: widthVal}"> test </div>

</template>

<script setup lang="ts">

const widthVal = computed(() => {
  let width: string = ''
  // width = 'calc(100vw - 427px)'
  width = '740px'
  width = width.replace(/\d+px/, match => pxToVwFromString(match)); // 替换 px 为 vw
  return width
})

</script>

参考文章：vue3+vite项目屏幕适配的两种方案，超详细！_vue3 vite rem-CSDN博客