不想让 postcss-px-to-viewport 转换字体大小怎么实现?
时间: 2024-11-02 08:07:00 浏览: 12
前端开源库-postcss-px-to-viewport
如果你不想让 `postcss-px-to-viewport` 插件自动转换字体大小,你可以通过设置插件的一些选项来控制。通常情况下,`postcss-px-to-viewport` 配置了一个名为 `unitPrecision` 的选项,它决定了当单位值小于某个阈值时是否应用 viewport 单位(如 `vw` 和 `vh`),默认是 4。
要阻止字体大小的转换,你需要将 `unitPrecision` 设置得非常高,比如设置成 `Infinity` 来确保所有尺寸都保持像素值不变。下面是一个示例配置:
```javascript
module.exports = {
plugins: [
require('postcss-px-to-viewport')({
unitPrecision: Infinity, // 不转换字体大小
viewportWidth: 750, // 视口宽度,默认为设备视口宽度
aspectRatio: 16 / 9, // 比例,可以省略
fontUnit: 'px', // 字体单位,默认为 'rem'
propList: ['*'], // 需要转换的CSS属性,默认为 '*' 包含所有
exclude: ['font-size'] // 阻止转换的属性列表,这里添加 'font-size' 属性
})
]
};
```
在这个配置中,`exclude: ['font-size']` 表明 `postcss-px-to-viewport` 将不会处理 `font-size` 属性,从而防止字体大小从像素转为视窗单位。
阅读全文