css-unit-converter-js

A lightweight JavaScript library for converting all common CSS units with high accuracy.

Installation

Add css-unit-converter-js to your project with npm

npm install css-unit-converter-js

Or use yarn

yarn add css-unit-converter-js

Usage

A simple example of conversions

import { pxToRem, remToPx, pxToVw } from 'css-unit-converter-js';

// Convert px to rem based on rem size (By default 16px)
pxToRem(24); // => 1.5

// Convert rem to px based on rem size (By default 16px)
remToPx(1.5); // => 24

// Convert px to rem based on provided rem size (32px)
pxToRem(16, 32); // => 0.5

// Convert px to vw based on provided viewport width (1920px)
pxToVw(192, 1920); // => 10

An example of applying fractional rounding on conversions

import { pxToVw } from 'css-unit-converter-js';

// By default, it applies fractional rounding up to 3 digits
pxToVw(23, 1920); // => 1.198

// Change fractional rounding
pxToVw(23, 1920, { fractionDigits: 5 }); // => 1.19792

// Disable fractional rounding
pxToVw(23, 1920, { fraction: false }); // => 1.1979166666666667

Converters

Converter	Arguments
pxToRem	px, remSize
pxToEm	px, emSize
pxToVw	px, viewportWidth
pxToVh	px, viewportHeight
pxToPt	px
pxToIn	px
pxToPc	px
pxToCm	px
remToPx	rem, remSize
remToEm	rem, remSize, emSize
remToVw	rem, remSize, viewportWidth
remToVh	rem, remSize, viewportHeight
remToPt	rem, remSize
remToIn	rem, remSize
remToPc	rem, remSize
remToCm	rem, remSize
emToPx	em, emSize
emToRem	em, emSize, remSize
emToVw	em, emSize, viewportWidth
emToVh	em, emSize, viewportHeight
emToPt	em, emSize
emToIn	em, emSize
emToPc	em, emSize
emToCm	em, emSize
vwToPx	vw, viewportWidth
vwToRem	vw, viewportWidth, remSize
vwToEm	vw, viewportWidth, emSize
vwToVh	vw, viewportWidth, viewportHeight
vwToPt	vw, viewportWidth
vwToIn	vw, viewportWidth
vwToPc	vw, viewportWidth
vwToCm	vw, viewportWidth
vhToPx	vh, viewportHeight
vhToRem	vh, viewportHeight, remSize
vhToEm	vh, viewportHeight, emSize
vhToVw	vh, viewportHeight, viewportWidth
vhToPt	vh, viewportHeight
vhToIn	vh, viewportHeight
vhToPc	vh, viewportHeight
vhToCm	vh, viewportHeight
ptToPx	pt
ptToRem	pt, remSize
ptToEm	pt, emSize
ptToVw	pt, viewportWidth
ptToVh	pt, viewportHeight
ptToIn	pt
ptToPc	pt
ptToCm	pt
inToPx	inch
inToRem	inch, remSize
inToEm	inch, emSize
inToVw	inch, viewportWidth
inToVh	inch, viewportHeight
inToPt	inch
inToPc	inch
inToCm	inch
pcToPx	pc
pcToRem	pc, remSize
pcToEm	pc, emSize
pcToVw	pc, viewportWidth
pcToVh	pc, viewportHeight
pcToPt	pc
pcToIn	pc
pcToCm	pc
cmToPx	cm
cmToRem	cm, remSize
cmToEm	cm, emSize
cmToVw	cm, viewportWidth
cmToVh	cm, viewportHeight
cmToPt	cm
cmToIn	cm
cmToPc	cm

Contributing

Got ideas or bug reports? Open an issue or send a pull request!

License

MIT