@unocss-applet/preset-rem-to-rpx

Coverts rem to rpx for utils.

Instal

npm i @unocss-applet/preset-rem-to-rpx --save-dev # with npm
yarn add @unocss-applet/preset-rem-to-rpx -D # with yarn
pnpm add @unocss-applet/preset-rem-to-rpx -D # with pnpm

Usage

import { defineConfig } from 'unocss'

import presetRemToRpx from '@unocss-applet/preset-rem-to-rpx'

export default defineConfig({
  presets: [
    // ...
    presetRemToRpx({ baseFontSize: 16, screenWidth: 375 }),
  ],
})

Type Declarations

export interface RemToRpxOptions {
  /**
   * 1rem = n px
   * @default 16
   */
  baseFontSize?: number

  /**
   * screen width in px
   * @default 375
   */
  screenWidth?: number
}

<div class="m-1rem"></div>

without

.m-1rem {
  margin: 1rem;
}

with

.m-1rem {
  margin: 32rpx;
}

License

MIT License © 2022-PRESENT Neil Lee