A tool for intelligently converting pixel units (px) to viewport width units (vw), designed for minimal responsive adaptation in projects using ant-design-vue, Vue 3, and Vite.
- Automatically convert
px
tovw
in CSS/JS - Support for Ant Design Vue's StyleProvider style transformation
- Provide Vite plugins for inline styles and build processes
- Support custom exclusion directories and manual conversion methods
pnpm i @stellaround/px-to-vw-converter
Initialize in main.ts:
import { setConfig } from '@stellaround/px-to-vw-converter'
// Defaults: viewportWidth=1920, precision=2
setConfig({
viewportWidth: 1920, // Design draft width (px)
precision: 3 // Decimal precision
})
In root component:
import { transformAntdCss } from '@stellaround/px-to-vw-converter'
export default () => (
<a-style-provider transformers={[transformAntdCss]}>
<App />
</a-style-provider>
)
vite.config.ts:
import {
vitePluginInlinePxToVw,
vitePluginPostCssPxToViewport
} from '@stellaround/px-to-vw-converter'
export default defineConfig({
plugins: [
// Handle inline styles
vitePluginInlinePxToVw({
excludeDirs: ['src/pages/overview'] // Excluded paths
}),
// Process CSS files
vitePluginPostCssPxToViewport()
]
})
For dynamic scenarios:
import { convertPxToVw } from '@stellaround/px-to-vw-converter'
// Convert 100px to vw
const vwValue = convertPxToVw(100) // e.g. "5.128vw"
Copyright (c) 2024-present spectature