Skip to content

Instantly share code, notes, and snippets.

@markhillard

markhillard/px2rem.markdown

Last active July 1, 2020 16:34
Show Gist options
  • Save markhillard/30f2a0fd3eb08c033631a94027e40ac4 to your computer and use it in GitHub Desktop.
Save markhillard/30f2a0fd3eb08c033631a94027e40ac4 to your computer and use it in GitHub Desktop.
Download ZIP
px2rem
Raw
px2rem.markdown
Raw
script.js
$(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);
});
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
Raw
style.css
/* 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;
}
}
Raw
test.html
<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 &divide;">
</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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment