深入探究px2rem

一、px2rem配置

px2rem是一種將像素單位轉換為rem單位的工具，它可以兼容不同屏幕解析度下的布局。在使用過程中，需要設置轉換的比例、最大和最小的轉換數值以及允許轉換的屬性列表。

下面是一個示例配置：

{
  "basePx": 16,
  "minPx": 1,
  "maxPx": 20,
  "propList": [
    "*"
  ]
}

在上面的配置中：

• basePx：表示設計稿中1rem對應的像素值，一般為16px。
• minPx：表示當像素值小於該值時，不做轉換。
• maxPx：表示當像素值大於該值時，不做轉換。
• propList：表示可以轉換的屬性列表，*表示所有屬性都可以轉換。

在webpack中的配置示例：

const px2remConfig = {
  remUnit: 16,  // 設計稿以 16px 為標準
  propList: ['*', '!font-size'],  // 這裡指定了除font-size以外的屬性都轉換
  selectorBlackList: ['html'],  // 不作用於html節點
  minPixelValue: 2  // 小於 2px 的值不作變換 
}

const px2remLoaderOptions = {
  remUnit: 16
}

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            css: ['style-loader', 'css-loader', 'px2rem-loader?' + qs.stringify(px2remLoaderOptions)]
          },
          postcss: [px2rem(px2remConfig)]
        }
      }
    ]
  }
}

二、postcss-pxtorem

postcss-pxtorem是一個使用rem代替px的postcss插件，它可以自動將px轉換成rem，並且對一些特殊情況進行處理。

示例代碼：

{
  plugins: {
    // rem適配方案
    'postcss-pxtorem': {
      rootValue: 16, // 設計圖的字體為16px
      unitPrecision: 5, // 保留小數位
      propList: ['*'], // 要轉換的屬性
      selectorBlackList: [], // 不進行px轉換的選擇器
      replace: true,
      mediaQuery: false,
      minPixelValue: 0
    }
  }
}

三、px2rem-loader

px2rem-loader是webpack中的一個loader，它可以將px轉換成rem並應用到css文件中。使用它可以避免手動轉換，加快開發效率。

下面是一個配置示例：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader!px2rem-loader?remUnit=75&remPrecision=8',
      }
    ]
  }
}

在上述代碼中，我們使用了px2rem-loader將css文件中的px單位轉為rem單位，其中remUnit表示1 rem等於多少px，remPrecision表示轉換後的rem小數點後保留幾位。

四、結論

px2rem可以幫助開發者實現對不同終端的適配，避免因屏幕尺寸不同造成的頁面排版問題。配置方法靈活，可以根據實際情況進行調整，同時可以使用postcss-pxtorem或者px2rem-loader來進行使用。