postcss 插件实现移动端适配

postcss 插件实现移动端适配

postcss-pxtorem 是一个 PostCSS 插件，它能够将 CSS 中的像素单位（px）转换为 rem 单位。这使得你可以直接按照设计稿的尺寸编写 CSS，并且通过这个插件自动转换为 rem，从而实现响应式布局，让页面在不同尺寸的设备上也能正确显示。

安装

npm install postcss postcss-pxtorem --save-dev
# 或者
yarn add postcss postcss-pxtorem --dev

GitCode项目地址: https://gitcode.com/gh_mirrors/po/postcss-pxtorem/overview?utm_source=artical_gitcode&index=top&type=card&webUrl&isLogin=1

配置介绍

rootValue

• 用途：定义 1rem 相对于多少像素。通常这个值是根据设计稿的宽度和你希望的 rem 基准值来确定的。

• 示例：如果你的设计稿宽度是 750px，并且你希望每 750px 对应 100rem，那么 rootValue 就应该是 750 / 100 = 7.5。如果设计稿宽度为 750px，每 750px 对应 20rem，则 rootValue 为 750 / 20 = 37.5。

propList

• 用途：指定哪些 CSS 属性应该被转换。默认情况下，只有某些常见的尺寸属性会被转换。

• 示例：[‘*’] 表示所有属性都会被转换；['width', 'height'] 表示只有 width 和 height 属性会被转换。

selectorBlackList

• 用途：指定哪些 CSS 选择器不应该被转换。通常用来排除一些不需要转换为 rem 的样式。

• 示例：['ignore-'] 表示所有以 ignore- 开头的选择器将不会被转换。

mediaQuery

-用途：指定是否在媒体查询中的 CSS 规则也应该被转换。

• 示例：true 表示媒体查询中的 CSS 规则也会被转换；false 表示媒体查询中的 CSS 规则不会被转换。

minPixelValue

• 用途：定义最小的像素值才会被转换为 rem。小于或等于这个值的像素将不会被转换。

• 示例：1 表示只有大于 1px 的值才会被转换。

replace

• 用途：指定是否替换原有的 px 值，还是在原有值的基础上追加 rem 值。

• 示例：true 表示替换原有的 px 值；false 表示保留原有的 px 值并在其基础上追加 rem 值。

unitPrecision

• 用途：定义转换后的 rem 值的小数点后保留的位数。

• 示例：5 表示转换后的 rem 值将保留 5 位小数。

配置

配置 postcss-pxtorem 插件可以通过多种方式完成，包括使用 .postcss 文件、package.json 文件或是在构建工具的配置文件中指定。

使用 .postcss 文件配置

在项目根目录创建一个 postcss.config.js 文件，并添加以下内容：

module.exports = {
  "plugins": {
    "postcss-pxtorem": {
      "rootValue": 18.75, // 根据设计稿的宽度（假设设计稿宽度为375px，则1rem=375/20=18.75px）
      "propList": ["*"], // 要转换的属性列表，"*" 表示所有属性
      "selectorBlackList": ["ignore-"], // 忽略的选择器前缀
      "mediaQuery": true, // 是否在媒体查询中也转换 px
      "minPixelValue": 1, // 最小的 px 值才转换为 rem
      "replace": true, // 是否替换而不是添加
      "unitPrecision": 5 // 单位转换后的精度
    }
  }
}

使用 Webpack 配置

如果你使用的是 Webpack，你可以在 webpack.config.js 中配置 PostCSS 插件：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  require('postcss-pxtorem')({
                    rootValue: 18.75,
                    propList: ["*"],
                    selectorBlackList: ["ignore-"],
                    mediaQuery: true,
                    minPixelValue: 1,
                    replace: true,
                    unitPrecision: 5
                  })
                ]
              }
            }
          }
        ]
      }
      // ...
    ]
  }
  // ...
};

在 vue.config.js 配置

const pxtorem = require('postcss-pxtorem');
const { defineConfig } = require('@vue/cli-service');

module.exports = defineConfig({
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    pxtorem({
                        rootValue: 18.75, // 根据设计稿的宽度（假设设计稿宽度为375px，则1rem=375/20=18.75px）
                        propList: ['*'], // 要转换的属性列表，"*" 表示所有属性
                        selectorBlackList: ['ignore-'], // 忽略的选择器前缀
                        mediaQuery: true, // 是否在媒体查询中也转换 px
                        minPixelValue: 1, // 最小的 px 值才转换为 rem
                        replace: true, // 是否替换而不是添加
                        unitPrecision: 5 // 单位转换后的精度
                    })
                ]
            }
        }
    }
})

注意事项

• 根值（rootValue）：rootValue 应该根据你的设计稿尺寸来设定。例如，如果你的设计稿宽度是 750px，并且你希望每 750px 对应 100rem，那么 rootValue 就应该是 750 / 100 = 7.5。但是，在上面的例子中，我们设定了 rootValue 为 37.5，这是基于每 750px 对应 20rem 的情况。你需要根据你的实际设计稿尺寸和需求来调整这个值。

• 选择器黑名单（selectorBlackList）：如果你有一些样式不想被转换，可以将它们的选择器前缀添加到 selectorBlackList 中。

• 媒体查询（mediaQuery）：如果希望在媒体查询中的样式也被转换为 rem，确保 mediaQuery 设置为 true。

使用示例

当你配置好 postcss-pxtorem 后，你可以在 CSS 文件中使用像素单位，而这些单位会被自动转换为 rem 单位。

/* 未转换前 */
.button {
  width: 200px;
  height: 40px;
  font-size: 12px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
}

/* 转换后 */
.button {
  width: 10.66667rem;
  height: 2.13333rem;
  font-size: 0.64rem;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 0.21333rem;
}

上述配置的 1rem 为 18.75px, 转换后如下图所示

总结

将 CSS 中的像素单位 px 转换为 rem 单位，以便实现响应式布局。具体配置如下：

• rootValue: 设置 1rem 相对于的像素值。假设设计稿宽度为 750px，每 750px 对应 100rem，则 rootValue 为 7.5。
• propList: 指定哪些 CSS 属性应该被转换。['*'] 表示所有属性都将被转换。
• selectorBlackList: 指定哪些选择器不应被转换。['ignore-'] 表示所有以 ignore- 开头的选择器将不会被转换。
• mediaQuery: 指定是否在媒体查询中的 CSS 规则也应该被转换。true 表示媒体查询中的规则也会被转换。
• minPixelValue: 定义最小的像素值才会被转换为 rem。小于或等于这个值的像素将不会被转换。1 表示只有大于 1px 的值才会被转换。
• replace: 指定是否替换原有的 px 值。true 表示替换原有的 px 值。
• unitPrecision: 定义转换后的 rem 值的小数点后保留的位数。5 表示转换后的 rem 值将保留 5 位小数。

通过这些配置，你可以确保 CSS 中的像素单位被正确转换为 rem 单位，从而实现更好的移动端适配。