vue3+vant4适配移动端（Viewport布局和Rem 布局适配）

Viewport 布局

Vant 默认使用 px 作为样式单位，如果需要使用 viewport 单位 (vw, vh, vmin, vmax)，推荐使用 postcss-px-to-viewport 进行转换。

postcss-px-to-viewport 是一款 PostCSS 插件，用于将 px 单位转化为 vw/vh 单位。

在我们的vite创建的项目中，可以在vite.config.js中配置

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from 'unplugin-vue-components/resolvers'
import pxtovw from 'postcss-px-to-viewport'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  ...
  css: {
    postcss: {
      plugins: [
        pxtovw({
          unitToConvert: 'px', // 要转化的单位
          viewportWidth: 750, // UI设计稿的宽度
          unitPrecision: 2, // 转换后的精度，即小数点位数
          propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
          viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
          fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
          minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
          mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
          replace: true, // 是否转换后直接更换属性值
          landscape: false, //是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
          landscapeUnit: 'rem', //横屏时使用的单位
          landscapeWidth: 1134, //横屏时使用的视口宽度
          include: [],
          exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
          customFun: ({ file }) => {
            // 这个自定义的方法是针对处理vant组件下的设计稿为375问题
            const designWidth = judgeComponent(file) ? 375 : 750
            return designWidth
          }
        })
      ]
    }
  }
})

const judgeComponent = (file) => {
  const ignore = ['vant']
  return ignore.some((item) => path.join(file).includes(path.join('node_modules', item)))
}

测试

<script setup></script>

<template>
  <div class="font">Login</div>
</template>

<style lang="scss" scoped>
.font {
  font-size: 36px;
}
</style>

已经转换成vw了。

Rem 布局适配

如果需要使用 rem 单位进行适配，推荐使用以下两个工具：

postcss-pxtorem 是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位
lib-flexible 用于设置 rem 基准值

计算公式

rem = px / rootValue

安装

npm install postcss-pxtorem lib-flexible --save-dev
# 或者使用 yarn
yarn add postcss-pxtorem  lib-flexible

配置

在main.js中引入lib-flexible

//省略
import 'lib-flexible' // 引入lib-flexible，用于动态设置 REM 基准值
//省略

在vite.config.js中配置

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from 'unplugin-vue-components/resolvers'
// import pxtovw from 'postcss-px-to-viewport'
// import path from 'path'
import pxtorem from 'postcss-pxtorem'

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    port: 3000
  },
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    postcss: {
      plugins: [
        pxtorem({
          //rootValue: 37.5, // Vant 2 默认的适配值是 37.5
          rootValue({ file }) {
            return file.indexOf('vant') !== -1 ? 37.5 : 75
          },
          propList: ['*'], //指定需要转换的 CSS 属性
          unitPrecision: 5, //指定转换后的 rem 值精度，默认为 5。
          selectorBlackList: [], //指定需要忽略转换的 CSS 选择器，可以使用字符串或正则表达式。
          replace: true, //指定是否替换原始的属性值，默认为 true。
          mediaQuery: false, //指定是否在媒体查询中也进行转换，默认为 false。
          minPixelValue: 1, //指定最小的像素值，小于该值的不进行转换，默认为 1。
          exclude: /node_modules/i //指定需要排除的文件路径或文件路径匹配的正则表达式
        })
      ]
    }
  }