@kokojs/plugin-rem
v3.33.13
Published
`@kokojs/plugin-rem` 提供 rem 适配的能力。
Downloads
790
Keywords
Readme
Rem 插件
@kokojs/plugin-rem 提供 rem 适配的能力。
安装
yarn add @kokojs/plugin-rem --dev安装完成后，在 koko.config.js 中添加如下配置：
module.exports = {
plugins: {
rem: {},
},
};功能
@kokojs/plugin-rem 主要做了两件事：
1. px 转 rem
在编译过程中通过 postcss 的 postcss-pxtorem 插件，将代码中的 px 单位自动转换为 rem 单位。
// input
.image {
width: 100px;
height: 75px;
}
// output
.image {
width: 2rem;
height: 1.5rem;
}2. 设定 rem 基准值
@kokojs/plugin-rem 会插入一小段运行时代码，代码执行时，会根据屏幕宽度计算 rem 基准值并设置到根节点上。
<html style="font-size: 50px;">
<!-- content -->
</html>配置项
pxtoremOptions
- Type:
object - Default:
{ rootValue: 50, propList: ['*'] }
postcss-pxtorem 插件的配置选项，详见 postcss-pxtorem 文档。
维护者
陈嘉涵。