Vue3移动端适配解决方案

导读：
使用vw和vh解决适配问题
vw：view width屏幕宽度，1vw等于屏幕宽度的百分之一
vh：view height屏幕高度，1vh等于屏幕高度的百分之一
使用插件postcss-px-to-viewport可以自动将px转换为vw/vh

安装

npm i postcss-px-to-viewport -D

vite.config.ts

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

export default defineConfig({
  plugins: [vue()],
  css: {
    postcss: {
      plugins: [
        pxToViewport({
          // 要转换的单位
          unitToConvert: 'px',
          // 设计稿的宽度
          viewportWidth: 320
        })
      ]
    }
  }
})