postcss-px-conversion

这是一个将像素单位转换为视口单位（vw、vh、vmin、vmax）的PostCSS插件。这段代码已经从原始项目evrone/postcss-px-to-viewport迁移过来，因为原项目已不再维护。这个迁移后的代码与最新版本的PostCSS兼容。

安装

要使用这个插件，你需要在你的项目中设置好PostCSS。如果你还没有设置PostCSS，你可以通过运行以下命令来安装：

1npm install postcss --save

接下来，安装postcss-px-conversion插件：

1npm install postcss-px-conversion --save

使用

要在你的PostCSS配置中使用这个插件，将其添加到PostCSS插件列表中，同时加上所需的配置选项。

以下是在postcss.config.js中的示例配置：

1// postcss.config.js
2
3module.exports = {
4  plugins: {
5    "postcss-px-conversion": {
6      unitType: "px", // 要从哪种单位转换（默认为'px'）
7      viewportWidth: 375,
8      enablePerFileConfig: true, // 启用per-file配置
9      viewportWidthComment: "viewport-width", // 用于指定视口宽度的注释
10      // 其他配置选项...
11    },
12  },
13};

Nuxt3 集成

nuxt.config.ts

1// https://nuxt.com/docs/api/configuration/nuxt-config
2export default defineNuxtConfig({
3  postcss: {
4    plugins: {
5      "postcss-px-conversion": {
6        unitType: "px", // 要从哪种单位转换（默认为'px'）
7        viewportWidth: 375,
8        unitPrecision: 10,
9        viewportUnit: "vw",
10        minPixelValue: 1,
11        includeFiles: [/\/pages\//],
12        excludeFiles: [/node_modules/, /pages\/active\/index\.vue/]
13      }
14    }
15  }
16});

目录结构

- package.json
- pages
 - index
    - index.vue
 - active
    -index.vue

index 页面会被自动转换单位，active页面不会

配置选项

你可以使用各种选项来配置这个插件：

• unitType：要从哪种单位转换（默认为'px'）。
• viewportWidth：视口的宽度。
• unitPrecision：vw单位的小数位数。
• allowedProperties：要转换为vw的CSS属性列表。
• excludedProperties：要排除在转换之外的CSS属性列表。
• viewportUnit：期望的视口单位（vw、vh、vmin、vmax）。
• fontViewportUnit：期望的字体视口单位。
• selectorBlacklist：要忽略的选择器（字符串或正则表达式）。
• minPixelValue：要替换的最小像素值。
• allowMediaQuery：在媒体查询中允许px到vw的转换。
• replaceRules：替换包含vw的规则而不是添加回退规则。
• excludeFiles：要忽略的文件（作为正则表达式数组）。
• includeFiles：只转换匹配的文件（作为正则表达式数组）。
• enableLandscape：为横向模式添加@media (orientation: landscape)。
• landscapeUnit：横向模式的期望单位。
• landscapeViewportWidth：横向方向的视口宽度。
• enablePerFileConfig：启用per-file配置（默认为true）。
• viewportWidthComment：用于指定视口宽度的注释（默认为"viewport-width"）。

请根据你的项目需求调整这些选项。

Per-File 配置

此插件现在支持per-file配置，允许你为每个CSS或SCSS文件指定不同的视口宽度。要使用这个功能，只需在文件的开头添加一个特殊的注释：

1/* viewport-width: 1920 */

插件会读取这个注释并使用指定的宽度来进行单位转换。这对于在同一个项目中为不同的设备（如PC、平板、手机）创建不同的CSS文件特别有用。

示例

以下是一个示例配置，将像素值转换为vw单位，默认视口宽度为750像素，并启用per-file配置：

1// postcss.config.js
2
3module.exports = {
4  plugins: {
5    "postcss-px-conversion": {
6      unitType: "px",
7      viewportWidth: 750,
8      unitPrecision: 5,
9      allowedProperties: ["*"],
10      excludedProperties: [],
11      viewportUnit: "vw",
12      fontViewportUnit: "vw",
13      selectorBlacklist: [],
14      minPixelValue: 1,
15      allowMediaQuery: false,
16      replaceRules: true,
17      excludeFiles: [],
18      includeFiles: [],
19      enableLandscape: false,
20      landscapeUnit: "vw",
21      landscapeViewportWidth: 568,
22      enablePerFileConfig: true,
23      viewportWidthComment: "viewport-width",
24    },
25  },
26};

使用这个配置，你的CSS中的像素值将在PostCSS处理期间自动转换为视口单位。同时，你可以在每个文件中使用注释来指定该文件的特定视口宽度。

例如，在一个针对桌面设备的CSS文件中：

1/* viewport-width: 1920 */
2.header {
3  width: 1600px; /* 将被转换为 83.33333vw */
4}

而在一个针对移动设备的CSS文件中：

1/* viewport-width: 375 */
2.header {
3  width: 350px; /* 将被转换为 93.33333vw */
4}

这样，你就可以在一次构建中生成适配多种设备的CSS，同时保持了代码的灵活性和可维护性。

鸣谢

原始代码从evrone/postcss-px-to-viewport迁移而来。

如果你有任何问题或疑虑，请在GitHub Issues上报告它们。

愉快的编码！

License

MIT License © 2023-PRESENT Kirk Lin