postcss-px2vw插件將px轉vw、rem

postcss-px2vw

一款 PostCSS 插件，將 px 轉換成 vw 和 rem。

該插件主要結合了 postcss-pxtorem 和 postcss-px-to-viewport 的功能，精簡了不常用的配置。默認將 vw 作為優先單位使用，以 rem 作為回退模式。考慮到 vw 在移動設備的支持度不如 rem，這款插件很好的解決了該問題。

安裝

$ npm install @moohng/postcss-px2vw --save-dev

使用

// .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，指定 0 或 false 時禁用
• rootValue：根字體大小，用於計算 rem。默認 75，指定 0 或 false 時禁用
• unitPrecision：計算結果的精度，默認 5
• minPixelValue：小於等於該值的 px 單位不作處理，默認 1

注意：該插件只會轉換 px 單位。rootValue 一般建議設置成 viewportWidth / 10
的大小，將設計圖分成10等分。由於瀏覽器有最小字體限制，如果設置得過小，頁面可能跟預期不一致

如果要使用 rem 單位，需要自己通過 js 來動態計算根字體的大小。如果將設計圖分成 10 等分計算，那么根字體的大小應該是 window.innerWidth / 10。

最后

如果你覺得對你有幫助，歡迎 star 和 issue

微信支付

Keywords
css rem pixel px vw view port postcss postcss-plugin