Skip to content

Instantly share code, notes, and snippets.

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>

This comment has been minimized.

Copy link

commented Apr 7, 2018

Nice work. Thank You!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.