Skip to content

ArthurArakelyan/css-unit-converter-js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

css-unit-converter-js

NPM Monthly Downloads NPM Total Downloads NPM version GitHub code size in bytes License

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

Reddit

Contributing

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

License

MIT