webunitconverter
Latest release - v1.0.0
A way to convert an entire CSS or JavaScript file to use a different unit.
Features
- Supports converting to and from em, rem, % and px.
- Can convert whole CSS files.
- Easily integrateable into your own projects.
- Licensed under the GNU LGPLv3.
- Doesn't depend on jQuery or any other JavaScript library
Demo
⟶
CSS Units
| Base unit ratio of each unit at root | |||||
|---|---|---|---|---|---|
| px | em | % | rem | Base unit ratio inherited from parent | |
| px | 16px:1em | 16px:100% | 16px:1rem | No | |
| em | 1em:16px | 1em:100% | 1em:1rem | Yes | |
| % | 100%:16px | 100%:1em | 100%:1rem | Yes | |
| rem | 1rem:16px | 1rem:1em | 1rem:100% | No | |
These will work on a whole CSS file
PX to REM
REM to PX
EM to %
% to EM
These will only work on part of a whole CSS file, with only elements that have the same parent. For each parent, the base pixel size should be adjusted.
PX to EM
EM to PX
PX to %
% to PX
Use these only if you know what you are doing!
EM to REM
REM to EM
REM to %
% to REM
Usage
- Download webunitconverter
- Add JS to page.
<script src="path/to/webunitconverter.js"></script> - Invoke function.
webunitconverter(originalunittolookfor, outputunit, basepixelsize, stringtobeconverted) - The output will be returned by the function.