postcss-px-to-viewport 可以实现全局字体大小设置吗
时间: 2023-10-03 09:08:27 浏览: 44
可以的,`postcss-px-to-viewport` 可以通过设置 `viewportWidth` 和 `viewportHeight` 来实现将 `px` 转换为 `vw` 或 `vh`,从而实现全局字体大小设置。
你可以在配置文件中添加以下代码:
```javascript
module.exports = {
plugins: [
require('postcss-px-to-viewport')({
viewportWidth: 750, // 视窗的宽度,对应设计稿的宽度
viewportHeight: 1334, // 视窗的高度,对应设计稿的高度
unitPrecision: 3, // 指定 `px` 转换为视窗单位值的小数位数
viewportUnit: 'vw', // 指定需要转换成的视窗单位,建议使用 vw
selectorBlackList: ['.ignore', '.hairlines'], // 指定不需要转换的类名,可以自定义
minPixelValue: 1, // 小于或等于 `1px` 不转换为视窗单位
mediaQuery: false // 允许在媒体查询中转换 `px`
}),
// 其他插件
]
}
```
在代码中使用 `px` 作为单位来设置字体大小,`postcss-px-to-viewport` 会自动将其转换为相应的 `vw` 值。例如,如果设计稿中某个字体大小为 `32px`,那么在代码中可以这样设置:
```css
font-size: 32px;
```
`postcss-px-to-viewport` 会将其转换为:
```css
font-size: 4.26667vw;
```
这样就可以实现全局字体大小的设置。