1. 安装 vw 插件
npm i postcss-px-to-viewport-8-plugin --save-dev
2. 配置 vite.config.js
import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import AutoImport from 'unplugin-auto-import/vite'; import Components from 'unplugin-vue-components/vite'; import { VantResolver } from '@vant/auto-import-resolver'; import postcsspxtoviewport8plugin from 'postcss-px-to-viewport-8-plugin'; // https://vite.dev/config/ export default defineConfig({ plugins: [ vue(), AutoImport({ resolvers: [VantResolver()], }), Components({ resolvers: [VantResolver()], }), ], css: { preprocessorOptions: { scss: { api: 'modern-compiler' }, }, postcss: { plugins: [ postcsspxtoviewport8plugin({ unitToConvert: 'px', viewportWidth: file => file.indexOf('vant') >= 0 ? 375 : 750, // 设计稿宽度 unitPrecision: 5, // 单位转换后保留的精度 propList: ['*'], // 能转化为vw的属性列表 viewportUnit: 'vw', // 希望使用的视口单位 fontViewportUnit: 'vw', // 字体使用的视口单位 selectorBlackList: [], // 需要忽略的CSS选择器,不会转为视口单位,使用原有的px等单位。 minPixelValue: 1, // 设置最小的转换数值,如果为1的话,只有大于1的值会被转换 mediaQuery: true, // 媒体查询里的单位是否需要转换单位 replace: true, // 是否直接更换属性值,而不添加备用属性 exclude: [], // 忽略某些文件夹下的文件或特定文件,例如 'node_modules' 下的文件 include: [], // 如果设置了include,那将只有匹配到的文件才会被转换 landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape) landscapeUnit: 'vw', // 横屏时使用的单位 landscapeWidth: 1024, // 横屏时使用的视口宽度 }), ] } } })
3. 设置视口
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" /> <meta author="fmg" create-date="2024/11/07" /> <title>Title</title> </head> <body> <div id="app"></div> <script type="module" src="/src/main.js" ></script> </body> </html>
标签:vue,vant,视口,vw,import,最新版,vite From: https://www.cnblogs.com/fmg0224/p/18531679