Coverts rem <=> rpx for utils.
npm i @unocss-applet/preset-rem-rpx --save-dev # with npm
yarn add @unocss-applet/preset-rem-rpx -D # with yarn
pnpm add @unocss-applet/preset-rem-rpx -D # with pnpmimport { presetRemRpx } from '@unocss-applet/preset-rem-rpx'
import { defineConfig } from 'unocss'
export default defineConfig({
presets: [
// ...
presetRemRpx({ baseFontSize: 16, screenWidth: 375, mode: 'rem2rpx' }),
],
})baseFontSize other than 16 and use rpx2rem mode, you need to set the corresponding root font-size in H5.
export interface RemRpxOptions {
/**
* 1rem = n px
* @default 16
*/
baseFontSize?: number
/**
* screen width in px
* @default 375
*/
screenWidth?: number
/**
* rem to rpx or rpx to rem
* @default 'rem2rpx'
*/
mode?: 'rem2rpx' | 'rpx2rem'
}<div class="m-1rem p-32rpx"></div>
.m-1rem {
margin: 1rem;
}
.p-32rpx {
padding: 32rpx;
} |
.m-1rem {
margin: 32rpx;
}
.p-32rpx {
padding: 32rpx;
} |
.m-1rem {
margin: 1rem;
}
.p-32rpx {
padding: 1rem;
} |
MIT License © 2022-PRESENT Neil Lee