npm 包 postcss-pxtorpx 使用教程

前端开发中，我们经常会遇到一些兼容性问题，其中之一就是移动端与 PC 端之间的兼容性问题。而移动端中，经常需要使用到 rem 或者 px 作为单位。但是 px 与 rem 的相对大小会造成很多麻烦。所以，我们需要一个自动将 px 转换为 rem 的工具，而 postcss-pxtorpx 就是这样的一个工具。

安装

使用 npm 进行安装：

npm i postcss-pxtorpx --save-dev

使用

在 postcss.config.js 中进行配置：

module.exports = {
  plugins: [
    require('postcss-pxtorpx')({
      // 配置项
    })
  ]
}

其中，postcss-pxtorpx 可以接收一个对象参数，这个对象内部可以配置一些可选属性。

{
  rootValue: 32, // 1rem 的大小，默认为 32px
  unitPrecision: 5, // 转换后的小数点位数，默认为 5
  propList: ['*'], // 进行转换的 css 属性，默认为 ['*']
  minPixelValue: 2 // 小于等于该值，不进行转换，默认为 2
}

示例代码

在代码中使用 px，同时配置 postcss-pxtorpx，即可自动进行 px 到 rem 的转换。

.demo {
  font-size: 16px;
  margin: 20px;
  width: 100px;
  height: 200px;
}

module.exports = {
  plugins: [
    require('postcss-pxtorpx')({
      rootValue: 16,
      propList: ['*']
    })
  ]
}

转换后：

.demo {
  font-size: 1rem;
  margin: 1.25rem;
  width: 6.25rem;
  height: 12.5rem;
}

深入探讨

rootValue 属性

rootValue 属性为 1rem 的大小，也就是说，如果你的设计稿中使用了 750px 的尺寸，则需要将 rootValue 设置为 75。这个值需要根据设计稿的宽度进行设置。

propList 属性

propList 属性可以设置要进行转换的 css 属性。默认情况下，会将所有属性进行转换。但是，在实际的开发中，也许我们只需要将某些属性进行转换。

minPixelValue 属性

minPixelValue 属性可以设置最小需要进行转换的像素值，如果小于该值，则不进行转换。这个属性可以避免一些特殊情况下的问题，比如一些图片大小的限制。

指导意义

postcss-pxtorpx 工具可以帮助我们在开发中自动进行 px 到 rem 的转换，避免了手动计算的麻烦。同时，它也提供了一些属性，可以灵活地调整转换的参数。

对于日益复杂的移动端开发中，这个工具是非常有用的，在日常工作中需要掌握并使用。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600551ae81e8991b448cf0ce