Mobile terminal adaptation solution postcss-px-to-viewport

installation

Add via npm

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

usage

Default options:

{
  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 The (string) unit to be converted, the default is px.

• viewportWidth (Number) The width of the viewport.

• unitPrecision (Number) Decimal number that allows mass units to increase.

• propList
  

  (Array) Can be changed from px to vw properties.

  • The values ​​must match exactly.
  • Use wildcards to enable all attributes. For example: [' ']
  • Use * at the beginning or end of a word. ([' Position '] will match background-position-y)
  • use! Mismatched attributes. E.g:['*','! letter-spacing ']
  • Combine the "not" prefix with other prefixes. For example: [' ', '! font ']

• viewportUnit (String) The expected unit.

• fontViewportUnit (String) The expected unit of the font.

• selectorBlackList
  

  (Array) The selector to be ignored, reserved as px.

  • If value is a string, it will check if the selector contains a string.
    • ['body'] Will match .body-class
  • If value is regexp, it will check if the selector matches regexp.
    • [/^body$/]Will match bodybut not match.body

• minPixelValue (Number) Set the minimum pixel value to be replaced.

• mediaQuery (Boolean) Allows to convert px in media queries.

• replace (Boolean) Replace the rule containing vw without adding fallback ads.

• exclude
  

  (Array or regular expression) Ignore certain files, such as "node_modules"

  • If the value is regexp, the matching file will be ignored.
  • If value is an array, the elements of the array are regexp.

• landscape(Boolean) Add to the value @media (orientation: landscape)converted landscapeWidth.

• landscapeUnit(String) landscapethe expected unit of the option

• landscapeWidth (Number) The width of the viewport for horizontal orientation.