@kokojs/plugin-rem

@kokojs/plugin-rem 提供 rem 适配的能力。

Usage no npm install needed!

<script type="module">
  import kokojsPluginRem from 'https://cdn.skypack.dev/@kokojs/plugin-rem';
</script>

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 文档

维护者

陈嘉涵。