手动实现手机端像素适配的vite插件（vw适配）

首先，我们想要自己手动实现手机端像素适配插件的话，需要用到postcss包，由于我使用的是vite构建的项目，所以它里面自带了postcss，我们不需要额外安装。只需要直接使用它做一个vite的一个css插件即可。

实现代码如下：

import { Plugin } from "postcss";
interface Options {
  viewportWidth?: number;
}
// 默认配置选项
const defaultOptions: Options = {
  viewportWidth: 375,
  // ...其它
};
export const postcssPxToViewport = (
  options: Options = defaultOptions
): Plugin => {
  // 将默认的跟传入进来的参数合并
  const opt = Object.assign({}, options, defaultOptions);
  return {
    postcssPlugin: "postcss-px-to-viewport",
    // 该回调函数会传入一个参数，这个参数里有所写的css属性值
    Declaration(node) {
      console.log(node.value); // 这个是css样式中的值，例如：width: 10px; 输出：10px
      // 处理px单位，将px单位转为vw单位
      if (node.value.includes("px")) {
        const value = parseFloat(node.value);
        node.value = `${((value / opt.viewportWidth!) * 100).toFixed(2)}vw`;
      }
    },
  };
};

写好插件后，我们需要到vite.config.ts中使用一下插件。

import { postcssPxToViewport } from "./plugin/postcss-px-to-viewport";
export default defineConfig({
    // ...
    css: {
        postcss: {
            plugins: [postcssPxToViewport()]
        }
    }
})