Package Exports

fis3-postprocessor-cssreset

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (fis3-postprocessor-cssreset) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

fis3-postprocessor-cssreset

H5适配方案

why use fis3-postprocessor-cssreset?

fis3-postprocessor-cssreset 是一个fis3插件，用于将样式表中的px单位转换成rem单位，同时根据指定的dpr参数对数值进行缩放。如在默认参数下，fis3-postprocessor-cssreset将会对源代码进行如下转换。

source code

.container {
    width: 100%;
    height: 80px;
    margin: 0 30px;
    padding: 10px;
    font-size: 28px;
    color: #333;
    border: 1px solid #ddd;
}

output code

.container {
    width: 100%;
    height: 2.5rem;
    margin: 0 0.9375rem;
    padding: 0.3125rem;
    font-size: 14px;
    color: #333;
    border: 1px solid #ddd;
}

fis3-postprocessor-cssreset 支持批量指定属性的转换规则，并且内置了font和border，其中font相关属性只除去dpr值，不转换rem单位，而border相关属性既不除去dpr也不转换单位。你可以通过修改regain参数进行重置。

开始

npm install fis3-postprocessor-cssreset -g

fis.match('*.{less,css}', {
    postprocessor: fis.plugin('css-reset')
});

参数介绍

rootFontSize 指定根节点字体大小, 默认为 16

fis.match('*.{less,css}', {
    postprocessor: fis.plugin('css-reset', {
        rootFontSize: 10
    })
});

ignore 对特定属性设置不转换规则

fis.match('*.{less,css}', {
    postprocessor: fis.plugin('css-reset', {
        ignore: {
            // 只除以dpr不转换单位
            px: [
                'padding-top'
            ],
            // 既不除以dpr也不转换单位
            no: [
                'top',
                'bottom'
            ]
        }
    })
});

regain 恢复通过ignore设置的规则

fis.match('*.{less,css}', {
    postprocessor: fis.plugin('css-reset', {
        regain: {
            px: [
                'font*'
            ],
            // 只恢复border-right
            no: [
                'border-right*'
            ]
        }
    })
});

Notice

由于采用单行分析，程序无法准确判断当前行是否被包含在注释中，因此注释中的内容会被无条件转换。
规则优先级 /*px*/ > reset > ignore
css前缀将会被自动处理，在批处理属性中无需单独配置