npm install fis3-postprocessor-cssresetfis3-postprocessor-cssreset
H5适配方案
$3
fis3-postprocessor-cssreset 是一个fis3插件，用于将样式表中的px单位转换成rem单位，同时根据指定的dpr参数对数值进行缩放。如在默认参数下，fis3-postprocessor-cssreset将会对源代码进行如下转换。
source code
``style`
.container {
width: 100%;
height: 80px;
margin: 0 30px;
padding: 10px;
font-size: 28px;
color: #333;
border: 1px solid #ddd;
}
output codestyle`
.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参数进行重置。
$3
`shell`
npm install fis3-postprocessor-cssreset -g
`javascript
fis.match('*.{less,css}', {
postprocessor: fis.plugin('css-reset')
});
`
$3
* rootFontSize 指定根节点字体大小, 默认为 16`javascript`
fis.match('*.{less,css}', {
postprocessor: fis.plugin('css-reset', {
rootFontSize: 10
})
});
* ignore 对特定属性设置不转换规则`javascript`
fis.match('*.{less,css}', {
postprocessor: fis.plugin('css-reset', {
ignore: {
// 只除以dpr不转换单位
px: [
'padding-top'
],
// 既不除以dpr也不转换单位
no: [
'top',
'bottom'
]
}
})
});
* regain 恢复通过ignore设置的规则`javascript`
fis.match('*.{less,css}', {
postprocessor: fis.plugin('css-reset', {
regain: {
px: [
'font*'
],
// 只恢复border-right
no: [
'border-right*'
]
}
})
});
$3
* 由于采用单行分析，程序无法准确判断当前行是否被包含在注释中，因此注释中的内容会被无条件转换`。
规则优先级 /\px\*/ > reset > ignore
* css前缀将会被自动处理，在批处理属性中无需单独配置