モバイル端末適応ソリューションpostcss-px-to-viewport

インストールする

npm経由で追加

npm install postcss-px-to-viewport --save-dev

使い方

デフォルトのオプション：

{
  unitToConvert: 'px',
  viewportWidth: 320,
  unitPrecision: 5,
  propList: ['*'],
  viewportUnit: 'vw',
  fontViewportUnit: 'vw',
  selectorBlackList: [],
  minPixelValue: 1,
  mediaQuery: false,
  replace: true,
  exclude: [],
  landscape: false,
  landscapeUnit: 'vw',
  landscapeWidth: 568
}

• unitToConvert 変換する（文字列）単位。デフォルトはpxです。

• viewportWidth （数値）ビューポートの幅。

• unitPrecision （数値）質量単位の増加を可能にする10進数。

• propList
  

  （配列）pxプロパティからvwプロパティに変更できます。

  • 値は正確に一致する必要があります。
  • ワイルドカードを使用して、すべての属性を有効にします。例：[' ']
  • 単語の最初または最後に*を使用します。（[' Position ']はbackground-position-yと一致します）
  • 採用！属性が一致しません。例：['*'、 '！文字間隔 ']
  • 「not」プレフィックスを他のプレフィックスと組み合わせます。例：[' '、 '！フォント ']

• viewportUnit （ストリング）予期される単位。

• fontViewportUnit （ストリング）フォントの予期される単位。

• selectorBlackList
  

  （配列）無視されるセレクター。pxとして予約されています。

  • 値が文字列の場合、セレクターに文字列が含まれているかどうかをチェックします。
    • ['body'] 一致します .body-class
  • 値が正規表現の場合、セレクターが正規表現に一致するかどうかをチェックします。
    • [/^body$/]一致するbodyが一致しない.body

• minPixelValue （数値）置き換える最小ピクセル値を設定します。

• mediaQuery （ブール値）メディアクエリでpxを変換できます。

• replace （ブール）フォールバック広告を追加せずにvwを含むルールを置き換えます。

• exclude
  

  （配列または正規表現）「node_modules」などの特定のファイルを無視します

  • 値がregexpの場合、一致するファイルは無視されます。
  • valueが配列の場合、配列の要素は正規表現です。

• landscape（ブール）@media (orientation: landscape)変換された値に追加しますlandscapeWidth。

• landscapeUnit（文字列）landscapeオプションの予想単位

• landscapeWidth （数値）水平方向のビューポートの幅。