A CSS post-processor that converts px to viewport units (vw, vh, vmin, vmax).
npm install postcss-px-to-viewport-rxdeyA plugin for PostCSS that generates viewport units (vw, vh, vmin, vmax) from pixel units.
> 基于evrone/postcss-px-to-viewport修改
- 增加下方配置解决第三方 ui 库转换后缩小的问题
- 增加exclude排除文件配置
- 增加rules 自定义转换规则配置
- 增加multiple 转换倍数
- 增加propIgnoreList 过滤属性列表
``javascript`配置参数
'postcss-px-to-viewport-rxdey': {
viewportWidth: 750,
unitPrecision: 5,
viewportUnit: 'vw',
selectorBlackList: ['.ignore'],
minPixelValue: 1,
mediaQuery: false,
exclude: ['node_modules'],
multiple: 100,
propIgnoreList: ['font-size'],
rules: {
path: 'vux',
fn: (pixels, vw) => {
return vw*2 + 'vw';
},
},
},
> exclude 接收 文件夹名/文件名(带后缀);
> exclude 配置优先级大于rules对象中的path,rules配置会被直接排除;
> rules 接收对象,path为生效路径,不做配置或为空默认全局生效,参数同exclude;
> rules.fn 自定义转换规则,返回转换后的数值,没有返回值则不生效!,pixels:原始像素数值,vw:正常转换后的 vw 值,opt:上方填写的配置参数;
> multiple 转换时的倍数,(pixels / viewportSize) * 100原转换公式;
> propIgnoreList` 过滤属性列表,数组中的样式不会被转换;