Simple px to rem unit conversion with copy to clipboard functionality... modified from https://gist.github.com/daniellmb/3c8003550ccff7dd72aa.
A Pen by Mark Hillard on CodePen.
Simple px to rem unit conversion with copy to clipboard functionality... modified from https://gist.github.com/daniellmb/3c8003550ccff7dd72aa.
A Pen by Mark Hillard on CodePen.
$(document).ready(function () { | |
var result = $('#result'), | |
base = $('#base'), | |
list = $('#list'); | |
$('#calc').on('click', function () { | |
var baseVal = base.val(), | |
px = list.val().split(','), | |
html = []; | |
$.each(px, function (i, v) { | |
var px = parseInt(v), | |
rem = parseFloat((px / parseInt(baseVal, 10)).toPrecision(4)), | |
isBase = rem === 1 ? ' <i>(base)</i>' : ''; | |
html.push('<li>' + v + 'px = <span>' + rem + 'rem</span>' + isBase + '</li>'); | |
}); | |
result.html(html.join('')); | |
}).click(); | |
$(document).on('click', '#result li', function () { | |
var unit = $(this).find('span').text(); | |
prompt('Copy to clipboard: Ctrl+C, Enter', unit); | |
}); | |
}); |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> |
/* Global Styles */ | |
@import url("https://fonts.googleapis.com/css?family=Fira+Code:400,600,700&display=swap"); | |
:root { | |
--bg-color:#282c34; | |
--border-color:#343a47; | |
--text-color:#b6becc; | |
--em-color:#e4eeff; | |
} | |
html,body { | |
background-color:var(--bg-color); | |
color:var(--text-color); | |
font-family:"Fira Code", arial, sans-serif; | |
font-size:105%; | |
height:100%; | |
line-height:1.45; | |
} | |
*,*::before,*::after { box-sizing:border-box; } | |
*:focus { outline:none; } | |
input::-moz-focus-inner, | |
input::-moz-focus-inner { border:0; padding:0; } | |
::selection { | |
background-color:var(--border-color); | |
color:var(--text-color); | |
} | |
/* Form */ | |
form { | |
padding:3rem; | |
margin:0 auto; | |
max-width:1050px; | |
} | |
fieldset { | |
margin-bottom:3rem; | |
} | |
legend { | |
font-size:2rem; | |
font-weight:700; | |
margin-bottom:2rem; | |
} | |
label { | |
display:block; | |
font-weight:600; | |
letter-spacing:.02rem; | |
margin-bottom:.25rem; | |
} | |
input { | |
appearance:none; | |
background:none; | |
} | |
input[type="number"], | |
input[type="text"] { | |
background-color:var(--bg-color); | |
border:1px solid var(--border-color); | |
color:var(--text-color); | |
display:block; | |
font-family:"Fira Code", arial, sans-serif; | |
font-size:1rem; | |
font-weight:400; | |
margin:0 0 1.5rem; | |
max-width:100%; | |
padding:.65rem 1rem; | |
width:100%; | |
} | |
input[type="button"] { | |
background-color:var(--bg-color); | |
border:1px solid var(--border-color); | |
color:var(--text-color); | |
cursor:pointer; | |
display:inline-block; | |
font-family:"Fira Code", arial, sans-serif; | |
font-size:1rem; | |
font-weight:600; | |
line-height:normal; | |
padding:.65rem 1rem; | |
text-decoration:none; | |
} | |
input[type="button"]:hover, | |
input[type="button"]:focus { | |
background-color:var(--border-color); | |
} | |
/* Grid Display */ | |
ul { | |
display:grid; | |
grid-column-gap:0; | |
grid-row-gap:0; | |
grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); | |
margin-left:1px; | |
} | |
ul li { | |
border:1px solid var(--border-color); | |
cursor:pointer; | |
margin-top:-1px; | |
margin-left:-1px; | |
padding:.65rem 1rem; | |
} | |
ul li:hover { | |
background-color:var(--border-color); | |
} | |
ul li span { | |
color:var(--em-color); | |
font-weight:600; | |
} | |
/* Media */ | |
@media only screen and (max-width:479px) { | |
form { | |
padding:2rem; | |
} | |
} |
<form> | |
<fieldset> | |
<legend>px2rem</legend> | |
<label for="base">Base font size (px)</label> | |
<input type="number" id="base" value="16" min="1" step="1"> | |
<label for="list">Conversions (px)</label> | |
<input type="text" id="list" 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"> | |
<input id="calc" type="button" value="Calculate ÷"> | |
</fieldset> | |
<ul id="result"> | |
<li>1px = 0.0625rem</li> | |
<li>2px = 0.125rem</li> | |
<li>3px = 0.1875rem</li> | |
<li>4px = 0.25rem</li> | |
<li>5px = 0.3125rem</li> | |
<li>6px = 0.375rem</li> | |
<li>7px = 0.4375rem</li> | |
<li>8px = 0.5rem</li> | |
<li>9px = 0.5625rem</li> | |
<li>10px = 0.625rem</li> | |
<li>11px = 0.6875rem</li> | |
<li>12px = 0.75rem</li> | |
<li>13px = 0.8125rem</li> | |
<li>14px = 0.875rem</li> | |
<li>15px = 0.9375rem</li> | |
<li>16px = 1rem <i>(base)</i></li> | |
<li>18px = 1.125rem</li> | |
<li>20px = 1.25rem</li> | |
<li>22px = 1.375rem</li> | |
<li>24px = 1.5rem</li> | |
<li>26px = 1.625rem</li> | |
<li>28px = 1.75rem</li> | |
<li>30px = 1.875rem</li> | |
<li>32px = 2rem</li> | |
<li>34px = 2.125rem</li> | |
<li>36px = 2.25rem</li> | |
<li>38px = 2.375rem</li> | |
<li>40px = 2.5rem</li> | |
<li>50px = 3.125rem</li> | |
<li>60px = 3.75rem</li> | |
<li>70px = 4.375rem</li> | |
<li>80px = 5rem</li> | |
<li>90px = 5.625rem</li> | |
<li>100px = 6.25rem</li> | |
</ul> | |
</form> |