1. 怎么把文件中的px改为vw ？

第一步：安装插件 npm i postcss-px-to-viewport --save-dev

第二步：在一级目录中新建postcss.config.js,然后在文件中添加以下代码

    module.exports = {
      plugins: {
        autoprefixer: {},
        "postcss-px-to-viewport": {
          viewportWidth: 375,//视窗的宽度，对应的是我们设计稿的宽度
          viewportHeight: 667,//视窗的高度，对应的是我们设计稿的高度
          unitPrecision: 5,//指定'px'转换为视窗单位值得小数位数（很多时候无法整除）
          viewportUnit: 'vw',//指定需要转换成的视窗单位，这里使用vw
          selectorBlackList: ['ignore', 'tab-bar', 'tab-bar-item'],//指定不需要转换的类(样式的类名)
          minPixelValue: 1,//小于或等于‘1px’不转换为视窗单位
          mediaQuery: false,//允许在媒体查询中转换'px'
          exclude: [/TabBar/, /CartBottomBar/],//不进行单位转换的文件（数组中内容为正则表达式）
          landscape: false,  // 是否添加根据landscapeWidth生成的媒体查询条件 @media (orientation: landscape)
          landscapeUnit: "vw", // 横屏时使用的视窗单位
          landscapeWidth: 1134 // 横屏时使用的视窗宽度
        },
      }
    }

ps:

vite.config.js 不需做配置，因为vite默认就使用了postcss, 只需在根目录下配置postcss.config.js

当然也可以写到vite的配置文件中

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

const pxToVwPlugin = pxToVw({
  viewportWidth: 1920,
  viewportHeight: 1080,
  unitPrecision: 5,
  viewportUnit: 'vw',
  selectorBlackList: ['ignore', 'tab-bar', 'tab-bar-item'],
  minPixelValue: 1,
  mediaQuery: false,
  // exclude: [/TabBar/, /CartBottomBar/],//不进行单位转换的文件（数组中内容为正则表达式）
  landscape: false,
  landscapeUnit: "vw",
  landscapeWidth: 1134
})

export default () =>
  defineConfig({
    css: {
      postcss: {
        plugins: [pxToVwPlugin]
      }
    },
    plugins: [
      vue(),
    ],
  ...
  })

2. 怎么把px改为rem？

当然该方式已经不推荐使用了，考虑上方的view-port的使用方式 该方式仅供参考

如果使用Vue进行移动端页面的开发，需要对不同机型的宽高进行适配。最常用的方法是使用amfe-flexable和postcss-pxtorem这两个插件来帮助进行适配。

amfe-flexable

amfe-flexable是阿里发布的一套可伸缩适配方案。它能根据设备的宽高来设置页面body元素的字体大小，将1rem设置为设备宽度/10以及在页面大小转换时可以重新计算这些数值。

具体可见github连接：github.com/amfe/lib-fl…

postcss-pxtorem

postcss-pxtorem是postcss的一个插件，可以将对应的像素单位转换为rem。在vite中可以直接对其进行配置，因为vite已经集成了postcss。

其中最重要的配置属性为：

rootValue：根元素的值，即1rem对应的像素值大小。一般设置为设计稿尺寸/10

以及一些其他属性：

propList：需要进行转换的css属性的值，可以使用通配符。如：*意思是将全部属性单位都进行转换；["*position*"]会匹配到background-position-y
selectorBlackList：不进行单位转换的选择器。如设置为字符串body，则所有含有body字符串的选择器都不会被该插件进行转换；若设置为[/^body$/]，则body会被匹配到而不是.body
exclude：不需要进行单位转换的文件
mediaQuery：是否允许像素在媒体查询中进行转换

在Vite中进行配置使用

插件安装

//npm方式
npm install postcss-pxtorem --save-dev
npm install amfe-flexible --save-dev

//pnpm方式
pnpm add postcss-pxtorem -D
pnpm add amfe-flexible -D

在main.ts**中引入：

import 'amfe-flexible'

可以看到，html元素的字体大小被设置为**设备宽度/10，**证明amfe-flexible配置成功：

在**vite.config.js中配置postcss-pxtorem**：

import postCssPxToRem from "postcss-pxtorem"
...

export default defineConfig({
  ...
  css: {
    postcss: {
      plugins: [
        postCssPxToRem({
          rootValue: 16, // 1rem的大小
          propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
        })
      ]
    }
  },
...
})

这里本来设置el-input元素的宽度为350px，但是使用了postcss-pxtorem之后会将px转换为rem，参照的基准就是rootValue，所以此处得到350/37.5=9.333…为1rem：

由于rootValue是固定的，所以元素计算出来的rem单位也是一个固定的值（如上例的9.33）。但是在amfe-flexable会计算不同宽高设备的元素的根字体大小，所以每次都能计算得到一个适配的宽高。如上例中，9.333rem在iPhone X（375*812）中会被计算为9.333*37.5：

但是在iPhone 8 Plus（414*736）中，同样是9.333rem，这个元素的宽度被计算为9.333*41.4：

怎么把文件中的px改为想用的单位？

1. 怎么把文件中的px改为vw ？

2. 怎么把px改为rem？

amfe-flexable

postcss-pxtorem

在Vite中进行配置使用