Vue3+vite+ts做H5页面适配的方案

通常在前端页面绘制好之后会，如果放在不同的平台或者说浏览器的分辨率不一致的时候，会产生一个页面布局会差强人意的现象

先来看看一个没有做适配的页面在正常情况的展示

那么如果我们在浏览器分辨率不同的情况下会是什么情况（这里我通过缩放浏览器来模拟）

那么这里是不是就有很多元素发生了偏移，或者说字体部分已经小到无法看清了 ,那么现在就要提出解决方案了

开始上代码
第一：了解下目录结构
这里我们需要涉及到两个文件
plugins是我们放置转换插件的地方
vite.config.ts是我们需要配置我们所自定义插件的地方

第二：开始开发页面适配插件
单位转换文件

// 这里无需安装postcss依赖了，vite已经内置了
import {
    
     Plugin } from "postcss";
// 配置基础参数
const Options = {
    
    
    // 默认的开发设计图宽度
    viewPortWidth: 1920
}
// 定义一个类型接口
interface Options {
    
    
    viewPortWidth?: number
}
/**
 * PostCssToViewPort    插件名
 * options 插件函数参数
 * Options  参数类型
 * Options = Options    为参数赋值默认值
 */
export const PostCssToViewPort = (options: Options = Options): Plugin => {
    
    
    // 这里吧定义的默认参数拿过来
    const opt = (<any>Object).assign({
    
    }, Options, options)
    return {
    
    
        postcssPlugin: 'postcss-px-to-viewport',
        // 钩子函数
        Declaration(node) {
    
    
            // 这里node有很多参数，node.prop 为属性名字，node.value为属性值
            // 把px转换
            if (node.value.includes('px')) {
    
    
                // parseFloat方法去掉px
                const num = parseFloat(node.value)
                // 通过计算为css样式重新计算值
                node.value = `${
      
      ((num / opt.viewPortWidth) * 100).toFixed(2)}vw`
            }
        }
    }
}

vite.config.ts文件内，配置我们刚刚写的插件

import {
    
     defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import {
    
     PostCssToViewPort } from "./src/plugins/postcss-px-to-viewport";

// https://vitejs.dev/config/
export default defineConfig({
    
    
    plugins: [vue()],
    css: {
    
    
        postcss: {
    
    
            // 记住我们的插件属于css，不要上来看到插件 就放到 plugins: [vue()]当中
            plugins: [PostCssToViewPort()]
        }
    }
})

第三：到这里就配置好了，运行起来，并同样缩放查看效果（完全不收分辨率影响了）



到这里完美解决了 适配的问题