vite-plugin-px-rem v0.1.2

使用指南

默认:设计稿宽1920,高度1080

// #vite.config.ts
import { px2rem } from 'vite-plugin-px-rem'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        px2rem()
        // 等同于
        // px2rem({ width: 1920, height: 1080, rootFontSize: 4, breakThroughMinimumFontLimit: false })
    ]
})

参数说明

rootFontSize number 网页根节点的font-size大小,如果很多地方都使用继承根节点font-size,可以设置一个特定值,比如整个页面的字体大小都是13,可以把此值设为13

width number UI给的设计稿宽度

height number UI给的设计稿高度

maxScreenWidth number 允许适配的最大屏幕宽度(使用场景:设计稿的宽度是1200,如果屏幕宽度3600,相当于内容就放大了3倍,看起来可能就非常大,把这个值设置为2400,就意味着最多放大两倍)

breakThroughMinimumFontLimit boolean 突破最小字体大小限制

tips

• 不支持行内样式转化
• 如果不想被转化为rem,可以把px=>Px p大写