vite插件实现移动端适配

因为1px代表一个像素，每一个手机的屏幕大小不同，直接用px会导致小屏幕的手机和大屏幕的手机显示效果天差地别，所以需要进行移动端适配。目前主流的移动端适配方案有两种：rem适配和vw，本文实现手写vite插件实现vw的适配

在html文件中需要添加下列代码，使用viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

文中使用了postCss，因为vite中已经内置了postCss因此无需下载

创建文件 postcss-px2viewport.ts，代码如下

import { Plugin } from 'postcss'

interface Options {
  viewportWidth?:number
}

const Options = {
  viewportWidth: 375, // UI设计稿的宽度，可以修改(375,750)，默认给375
}

export const PostCsspxToViewport = (options: Options = Options):Plugin => {
  const opt = Object.assign({}, Options, options)
  return {
    postcssPlugin: 'postcss-px-to-viewport',
    Declaration(node) {
      // 有些px可能不需要转换  可以自定义名称
      if (node.value.includes('px')) {
        const num = parseFloat(node.value)  // 考虑到有小数
        node.value = `${((num / opt.viewportWidth) * 100).toFixed(2)}vw`
       }
    }
  }
}

在vite中使用：在vite.config.ts中配置如下

// 引入插件
import { PostCsspxToViewport } from './src/plugin/postscc-pxtoviewport'

export default defineConfig({
  // ....
  /// 添加css配置
  css: {
    postcss: {
      plugins: [
        PostCsspxToViewport()
      ]
    }
  }
})

查看效果: px都已经转化为了vw，随意修改屏幕大小显示效果都没有改变