vue3 postcss-px-to-viewport 页面自适应

一、什么是 postcss-px-to-viewport？

postcss-px-to-viewport 是一个 PostCSS 插件，它可以将 px 单位转换为视口单位（vw、vh 或 vmin）。

视口单位是相对于视口尺寸来计算的长度单位，而不是相对于父元素或根元素。这意味着使用视口单位进行布局和样式设置时，元素会随着屏幕尺寸的变化而自适应。

二、为什么要使用 postcss-px-to-viewport？

在移动端开发中，我们通常使用 viewport 来适配不同的屏幕尺寸。但是，在实际开发中，我们经常遇到以下问题：

• 在不同屏幕尺寸下显示效果不一致。
• 在高分辨率屏幕上，元素过小或过大。
• 使用 rem 单位存在兼容性问题。
  因此，我们需要一种更加智能、灵活的单位来解决这些问题。而 postcss-px-to-viewport 就是解决这个问题的好方案。

三、如何在 Vue3 中使用 postcss-px-to-viewport？

首先，我们需要安装相关的依赖：

npm install postcss-px-to-viewport -D

在vite.config.ts的css中添加以下代码

postcss: {
      plugins: [
        postcsspxtoviewport({
          unitToConvert: "qy", // 要转化的单位
          viewportWidth: 750, // UI设计稿的宽度
          unitPrecision: 6, // 转换后的精度，即小数点位数
          propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
          viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
          fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
          selectorBlackList: ["ignore-"], // 指定不转换为视窗单位的类名，
          minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
          mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
          replace: true, // 是否转换后直接更换属性值
          landscape: false, // 是否处理横屏情况
        }),
      ],
    },

编写postcss-px-to-viewport.d.ts申明文件

declare module "postcss-px-to-viewport" {
  type Options = {
    unitToConvert: "px" | "rem" | "cm" | "em" | "qy";
    viewportWidth: number;
    viewportHeight: number; // not now used; TODO: need for different units and math for different properties
    unitPrecision: number;
    viewportUnit: string;
    fontViewportUnit: string; // vmin is more suitable.
    selectorBlackList: string[];
    propList: string[];
    minPixelValue: number;
    mediaQuery: boolean;
    replace: boolean;
    landscape: boolean;
    landscapeUnit: string;
    landscapeWidth: number;
  };

  export default function (options: Partial<Options>): any;
}

在unitToConvert中，出了常见的单位之外，我们也可以添加自定义单位，如：qy，从而和常见单位进行区分

四、案例效果

样式编写

.box {
  width: 500px;
  height: 500px;
  border: 1px solid red;
}

效果

在上面效果中我们可以看见，盒子的宽高随视口的改变而改变