@moohng/postcss-px2vw

A CSS post-processor that converts px to vw and fallback rem.

Stats

StarsIssuesVersionUpdatedCreatedSize
@moohng/postcss-px2vw
2701.1.02 months ago3 years agoMinified + gzip package size for @moohng/postcss-px2vw in KB

Readme

postcss-px2vw

npm npm GitHub

一款 PostCSS 插件,将 px 转换成 vwrem

该插件主要结合了 postcss-pxtorempostcss-px-to-viewport 的功能,精简了不常用的配置。默认将 vw 作为优先单位使用,以 rem 作为回退模式。考虑到 vw 在移动设备的支持度不如 rem,这款插件很好的解决了该问题。

安装

$ npm i @moohng/postcss-px2vw -D

使用

// .postcssrc.js
module.exports = {
  plugins: {
    '@moohng/postcss-px2vw': {}
  }
}

举例:

// input
.class {
  border: 1px solid black;
  margin-bottom: 1px;
  font-size: 20px;
  line-height: 30px;
}
// output
.class {
  border: 1px solid black;
  margin-bottom: 1px;
  font-size: 0.625rem;
  font-size: 6.25vw;
  line-height: 0.9375rem;
  line-height: 9.375vw;
}

配置

  • viewportWidth:对应设计图的宽度,用于计算 vw。默认 750,指定 0false 时禁用
  • rootValue:根字体大小,用于计算 rem。默认 75,指定 0false 时禁用
  • unitPrecision:计算结果的精度,默认 5
  • minPixelValue:小于等于该值的 px 单位不作处理,默认 1

注意:该插件只会转换 px 单位。rootValue 一般建议设置成 viewportWidth / 10 的大小,将设计图分成10等分。由于浏览器有最小字体限制,如果设置得过小,页面可能跟预期不一致

如果要使用 rem 单位,需要自己通过 js 来动态计算根字体的大小。如果将设计图分成 10 等分计算,那么根字体的大小应该是 window.innerWidth / 10

最后

如果你觉得对你有帮助,欢迎 star 和 issue

微信支付

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.