postcss-px 2 vwプラグイン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