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 | | pxToMm | px | | pxToPercentage | px, base | | 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 | | remToMm | rem, remSize | | remToPercentage | rem, remSize, base | | 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 | | emToMm | em, emSize | | emToPercentage | em, emSize, base | | 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 | | vwToMm | vw, viewportWidth | | vwToPercentage | vw, viewportWidth, base | | 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 | | vhToMm | vh, viewportHeight | | vhToPercentage | vh, viewportHeight, base | | ptToPx | pt | | ptToRem | pt, remSize | | ptToEm | pt, emSize | | ptToVw | pt, viewportWidth | | ptToVh | pt, viewportHeight | | ptToIn | pt | | ptToPc | pt | | ptToCm | pt | | ptToMm | pt | | ptToPercentage | pt, base | | inToPx | inch | | inToRem | inch, remSize | | inToEm | inch, emSize | | inToVw | inch, viewportWidth | | inToVh | inch, viewportHeight | | inToPt | inch | | inToPc | inch | | inToCm | inch | | inToMm | inch | | inToPercentage | inch, base | | pcToPx | pc | | pcToRem | pc, remSize | | pcToEm | pc, emSize | | pcToVw | pc, viewportWidth | | pcToVh | pc, viewportHeight | | pcToPt | pc | | pcToIn | pc | | pcToCm | pc | | pcToMm | pc | | pcToPercentage | pc, base | | cmToPx | cm | | cmToRem | cm, remSize | | cmToEm | cm, emSize | | cmToVw | cm, viewportWidth | | cmToVh | cm, viewportHeight | | cmToPt | cm | | cmToIn | cm | | cmToPc | cm | | cmToMm | cm | | cmToPercentage | cm, base | | mmToPx | mm | | mmToRem | mm, remSize | | mmToEm | mm, emSize | | mmToVw | mm, viewportWidth | | mmToVh | mm, viewportHeight | | mmToPt | mm | | mmToIn | mm | | mmToPc | mm | | mmToCm | mm | | mmToPercentage | mm, base | | percentageToPx | percent, base | | percentageToRem | percent, base, remSize | | percentageToEm | percent, base, emSize | | percentageToVw | percent, base, viewportWidth | | percentageToVh | percent, base, viewportHeight | | percentageToPt | percent, base | | percentageToIn | percent, base | | percentageToPc | percent, base | | percentageToCm | percent, base | | percentageToMm | percent, base |

Communities

Contributing

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

License

MIT