Convert CSS Units

Easily convert CSS px values to responsive units with keyboard shortcuts and smart conversion

✨ Key Features

One-click conversion of px values to responsive units (rem, em, vw, vh, vmin, vmax, cqw, cqh)
Keyboard shortcut for quick conversion
Configurable base values for accurate conversions
Smart conversion with customizable parameters
Support for multiple responsive unit types

Operating System	Shortcut
Windows, Linux	`Alt + Z`
Mac	`Alt + Z`

Customize the extension in your VSCode settings.json

{
  "convertCSSUnits.unit": "rem",
  "convertCSSUnits.baseFontSize": 16,
  "convertCSSUnits.baseWidth": 1920,
  "convertCSSUnits.baseHeight": 1080
}

Option	Description	Default
`convertCSSUnits.unit`	Target unit for conversion	`rem`
`convertCSSUnits.baseFontSize`	Base font size for em/rem conversion (px)	`16`
`convertCSSUnits.baseWidth`	Base width for vw/cqw conversion (px)	`1920`
`convertCSSUnits.baseHeight`	Base height for vh/cqh conversion (px)	`1080`

Select px value in your CSS file
Press Alt + Z to convert to the configured unit
Use commands to change conversion settings:
- Convert CSS Units: Set Unit
- Convert CSS Units: Set Base Font Size (px)
- Convert CSS Units: Set Base Width (px)
- Convert CSS Units: Set Base Height (px)

Command	Description
`Convert CSS Units: Convert Selected px`	Convert selected px to target unit
`Convert CSS Units: Set Unit`	Change target conversion unit
`Convert CSS Units: Set Base Font Size`	Configure base font size
`Convert CSS Units: Set Base Width`	Configure base width
`Convert CSS Units: Set Base Height`	Configure base height

.container {
  width: 320px;
  height: 240px;
  font-size: 16px;
  margin: 20px;
}

.container {
  width: 20rem;
  height: 15rem;
  font-size: 1rem;
  margin: 1.25rem;
}

.container {
  width: 16.67vw;
  height: 12.5vw;
  font-size: 0.83vw;
  margin: 1.04vw;
}