Skip to content

Instantly share code, notes, and snippets.

Last active September 6, 2022 13:46
  • Star 20 You must be signed in to star a gist
  • Fork 8 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
PX-to-REM Calculator
(function($) {
var result = $('#result');
var base = $('#base');
var list = $('#list');
$('#calc').click(function() {
var baseVal = base.val();
var px = list.val().split(',');
var html = [];
$.each(px, function(i, v) {
var px = parseInt(v);
var rem = parseFloat((px / parseInt(baseVal, 10)).toPrecision(4));
var isBase = (rem === 1) ? ' <i>(base)</i>' : '';
html.push('<li>' + v + 'px = ' + rem + 'rem' + isBase + '</li>')
<input id="base" type='text' value='16'>
<label> Base &lt;HTML&gt; font-size (in px)</label>
<input id='list' type='text' value='1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,18,20,22,24,26,28,30,32,34,36,38,40,50,60,70,80,90,100'>
<label> PX sizes to convert</label>
<input id='calc' type='button' value='Calculate'>
<ul id='result'></ul>
Copy link

Nice work. Thank You!

Copy link

thank you for sharing this!

Copy link

singe-k commented May 7, 2020

Hi mate, this is great. Any chance we can use the enter button on calculate?

Copy link


Copy link

Muchas gracias

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment