PostCSS Vw By Px
A plugin for PostCSS that generates viewport units (vw, vh, vmin, vmax) from pixel units. You can control the conversion by commenting/* vh */
and /* px */
example
input
output
Options
Default
viewportWidth: 750 viewportHeight: 1334 minPxValue: 2 viewportUnit: 'vmin' ignoreProperty:
- viewportWidth (Number) The width of the viewport.
- viewportHeight (Number) The height of the viewport.
- minPxValue (Number) The bottom line of transformation.
- viewportUnit (String) Expected units.
- ignoreProperty (Array) The propertys to ignore and leave as px.
- example, you add border-radius, px2vw will leave -webkit-border-radius, -moz-border-radius, -o-border-radius as px
commonly, we don't hope to convert some attributes, such as font-size
, add this property to ignoreProperty, all of font-size property will be ignored. also, i think some property should be converted to vh
, you can do this:
Usage
// postcss.config.jsmoduleexports = plugins: viewportWidth: 750 viewportHeight: 1334 minPxValue: 2 viewportUnit: 'vmin' ignoreProperty: ...
See PostCSS docs for examples for your environment.