PX to REM Converter \u2013 Responsive CSS Toolkit<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bricolage+Grotesque:wght@500;700;800&family=JetBrains+Mono:wght@400;600&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n:root{--bg:#EEF1F5;--panel:#FFFFFF;--ink:#12202E;--mute:#5B6B7B;--line:#D5DCE4;--acc:#2457F5;--acc-ink:#fff;--hot:#F29A00;--ok:#12805C;\r\n--head:'Bricolage Grotesque',system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,Menlo,monospace;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}\r\n@media (prefers-color-scheme:dark){:root:not([data-theme=\"light\"]){--bg:#0C131B;--panel:#141E29;--ink:#E8EEF4;--mute:#8FA0B1;--line:#26343F;--acc:#6B8CFF;--acc-ink:#0C131B;--hot:#FFB224;--ok:#3DD6A0;color-scheme:dark}}\r\n:root[data-theme=\"dark\"]{--bg:#0C131B;--panel:#141E29;--ink:#E8EEF4;--mute:#8FA0B1;--line:#26343F;--acc:#6B8CFF;--acc-ink:#0C131B;--hot:#FFB224;--ok:#3DD6A0;color-scheme:dark}\r\n*{box-sizing:border-box}html{scroll-padding-top:env(safe-area-inset-top,0px)}\r\nbody{margin:0;background:var(--bg);color:var(--ink);font:16px\/1.5 system-ui,sans-serif;-webkit-font-smoothing:antialiased}\r\n.wrap{max-width:1080px;margin:0 auto;padding:20px 16px 48px}\r\nheader{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:20px}\r\nh1{font:800 clamp(1.7rem,5vw,2.8rem)\/1.05 var(--head);letter-spacing:-.03em;margin:0}\r\nh1 em{font-style:normal;color:var(--acc)}\r\n.sub{color:var(--mute);margin:8px 0 0;max-width:52ch}\r\nbutton,input,textarea{font:inherit;color:inherit}\r\n.ghost{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 12px;cursor:pointer}\r\n.tabs{display:flex;gap:6px;overflow-x:auto;padding:4px;background:var(--panel);border:1px solid var(--line);border-radius:14px;margin-bottom:16px}\r\n.tabs button{flex:1 0 auto;border:0;background:none;padding:10px 14px;border-radius:10px;cursor:pointer;font-weight:600;color:var(--mute);white-space:nowrap}\r\n.tabs button[aria-selected=true]{background:var(--acc);color:var(--acc-ink)}\r\nbutton:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--acc);outline-offset:2px}\r\n.panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:20px}\r\n.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}\r\n@media(max-width:820px){.grid{grid-template-columns:1fr}}\r\nlabel{display:block;font-size:.8rem;color:var(--mute);margin-bottom:6px;font-weight:600}\r\ninput[type=number],textarea{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-family:var(--mono)}\r\ntextarea{min-height:200px;resize:vertical;font-size:.85rem}\r\ninput[type=range]{width:100%;accent-color:var(--acc)}\r\n.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}\r\n.row>*{flex:1 1 120px}\r\n.swap{flex:0 0 auto!important;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--bg);cursor:pointer;font-size:1.1rem}\r\n.readout{margin:16px 0;padding:18px;border-radius:14px;background:var(--ink);color:var(--bg);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}\r\n.readout .big{font:700 clamp(1.8rem,6vw,3rem)\/1 var(--mono);letter-spacing:-.04em;word-break:break-all}\r\n.readout small{display:block;opacity:.65;font-family:var(--mono);margin-top:6px}\r\n.btn{background:var(--hot);color:#1b1200;border:0;border-radius:10px;padding:10px 16px;font-weight:700;cursor:pointer}\r\n.chips{display:flex;gap:8px;flex-wrap:wrap}\r\n.chip{border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:5px 12px;cursor:pointer;font-size:.85rem}\r\n.chip[aria-pressed=true]{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}\r\nh2{font:700 1.15rem var(--head);margin:0 0 12px}\r\n.tok{display:grid;grid-template-columns:90px 1fr 1fr;gap:8px;align-items:center;margin-bottom:8px;font-size:.9rem}\r\n.tok output{font-family:var(--mono);color:var(--acc);font-weight:600}\r\n.stage{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px;background:repeating-linear-gradient(0deg,transparent 0 15px,var(--line) 15px 16px),var(--bg);border-radius:14px;margin-top:12px;align-items:start}\r\n@media(max-width:520px){.stage{grid-template-columns:1fr}}\r\n.stage p.cap{margin:0 0 8px;font:600 .75rem var(--mono);color:var(--mute)}\r\n.mock{background:var(--panel);border:1px solid var(--line);color:var(--ink);box-shadow:0 1px 0 var(--line)}\r\n.mock h3{margin:0 0 .35em;font-family:var(--head)}.mock p{margin:0 0 .8em;color:var(--mute)}\r\n.mock span{display:inline-block;background:var(--acc);color:var(--acc-ink);padding:.4em .9em;border-radius:.5em;font-weight:600}\r\n.pill{display:inline-block;font:600 .7rem var(--mono);padding:2px 8px;border-radius:99px;margin-left:6px}\r\n.pill.fx{background:var(--line);color:var(--mute)}.pill.rm{background:var(--ok);color:var(--bg)}\r\n.opts{display:flex;gap:16px;flex-wrap:wrap;margin:10px 0;font-size:.9rem;align-items:center}\r\n.opts input[type=number]{width:70px;padding:6px 8px}\r\n.stat{font:600 .85rem var(--mono);color:var(--ok);margin:8px 0}\r\n.cheat{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}\r\n.cell{border:1px solid var(--line);background:var(--bg);border-radius:12px;padding:12px;cursor:pointer;text-align:left}\r\n.cell:hover{border-color:var(--acc)}\r\n.cell b{display:block;font:700 1.1rem var(--mono)}.cell span{color:var(--mute);font:.8rem var(--mono)}\r\n.bar{height:6px;border-radius:3px;background:var(--acc);margin-top:8px}\r\n.fluid-view{border:1px dashed var(--line);border-radius:12px;padding:16px;margin-top:12px;overflow:hidden;background:var(--bg)}\r\n.fluid-box{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px;margin:0 auto;overflow:hidden;transition:width .05s}\r\n.fluid-box div{font-family:var(--head);font-weight:800;line-height:1.1}\r\n.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,30px);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:99px;opacity:0;transition:.25s;font-weight:600;pointer-events:none}\r\n.toast.on{opacity:1;transform:translate(-50%,0)}\r\n.hide{display:none}\r\n@media(prefers-reduced-motion:reduce){*{transition:none!important}}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"wrap\">\r\n<header>\r\n <div>\r\n <h1>PX <em>\u2192<\/em> REM<\/h1>\r\n <p class=\"sub\">Responsive CSS toolkit: convert units, batch-convert stylesheets, build fluid <code>clamp()<\/code> values and see the result live.<\/p>\r\n <\/div>\r\n <button class=\"ghost\" id=\"theme\" aria-label=\"Toggle theme\">Theme<\/button>\r\n<\/header>\r\n\r\n<div class=\"tabs\" role=\"tablist\">\r\n <button role=\"tab\" aria-selected=\"true\" data-t=\"conv\">Converter<\/button>\r\n <button role=\"tab\" aria-selected=\"false\" data-t=\"batch\">CSS Batch<\/button>\r\n <button role=\"tab\" aria-selected=\"false\" data-t=\"fluid\">Fluid clamp()<\/button>\r\n <button role=\"tab\" aria-selected=\"false\" data-t=\"cheat\">Cheat sheet<\/button>\r\n<\/div>\r\n\r\n\r\n<section id=\"conv\" class=\"panel\">\r\n <div class=\"grid\">\r\n <div>\r\n <h2>Quick convert<\/h2>\r\n <label for=\"base\">Root font-size (px)<\/label>\r\n <div class=\"chips\" id=\"presets\" style=\"margin-bottom:12px\"><\/div>\r\n <input type=\"number\" id=\"base\" value=\"16\" min=\"1\" step=\"any\">\r\n <div class=\"row\" style=\"margin-top:14px\">\r\n <div><label for=\"a\" id=\"la\">Pixels (px)<\/label><input type=\"number\" id=\"a\" value=\"24\" step=\"any\"><\/div>\r\n <button class=\"swap\" id=\"swap\" aria-label=\"Swap direction\">\u21c4<\/button>\r\n <div><label for=\"b\" id=\"lb\">Rem<\/label><input type=\"number\" id=\"b\" step=\"any\"><\/div>\r\n <\/div>\r\n <div class=\"readout\">\r\n <div><div class=\"big\" id=\"out\">1.5rem<\/div><small id=\"eq\"><\/small><\/div>\r\n <button class=\"btn\" id=\"copy\">Copy value<\/button>\r\n <\/div>\r\n <p class=\"sub\" style=\"font-size:.85rem\">Tip: <code>62.5%<\/code> on <code>html<\/code> makes 1rem = 10px, so 24px becomes 2.4rem. Pick the 10px preset to match.<\/p>\r\n <\/div>\r\n <div>\r\n <h2>Design tokens<\/h2>\r\n <div id=\"toks\"><\/div>\r\n <label for=\"root\" style=\"margin-top:14px\">Simulate user's browser font-size: <b id=\"rootv\">16px<\/b><\/label>\r\n <input type=\"range\" id=\"root\" min=\"12\" max=\"28\" value=\"16\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"stage\">\r\n <div><p class=\"cap\">px <span class=\"pill fx\">fixed<\/span><\/p><div class=\"mock\" id=\"mpx\"><h3>Pro plan<\/h3><p>Billed yearly, cancel anytime.<\/p><span>Start free<\/span><\/div><\/div>\r\n <div><p class=\"cap\">rem <span class=\"pill rm\">scales<\/span><\/p><div class=\"mock\" id=\"mrem\"><h3>Pro plan<\/h3><p>Billed yearly, cancel anytime.<\/p><span>Start free<\/span><\/div><\/div>\r\n <\/div>\r\n <p class=\"sub\" style=\"font-size:.85rem\">Move the slider: the rem card follows the user's font-size preference, the px card never does. That is the accessibility win.<\/p>\r\n<\/section>\r\n\r\n\r\n<section id=\"batch\" class=\"panel hide\">\r\n <h2>Convert a whole stylesheet<\/h2>\r\n <div class=\"opts\">\r\n <span class=\"chips\"><button class=\"chip\" data-d=\"p2r\" aria-pressed=\"true\">px \u2192 rem<\/button><button class=\"chip\" data-d=\"r2p\" aria-pressed=\"false\">rem \u2192 px<\/button><\/span>\r\n <label style=\"margin:0\">Base <input type=\"number\" id=\"bb\" value=\"16\"><\/label>\r\n <label style=\"margin:0\">Decimals <input type=\"number\" id=\"bp\" value=\"4\" min=\"0\" max=\"6\"><\/label>\r\n <label style=\"margin:0\"><input type=\"checkbox\" id=\"skip\" checked> Keep 1px borders<\/label>\r\n <\/div>\r\n <div class=\"grid\">\r\n <div><label for=\"inp\">Input CSS<\/label><textarea id=\"inp\" spellcheck=\"false\">.card {\r\n padding: 24px 32px;\r\n margin-bottom: 16px;\r\n border: 1px solid #ddd;\r\n border-radius: 12px;\r\n font-size: 18px;\r\n box-shadow: 0 4px 12px rgba(0,0,0,.1);\r\n}\r\n.card h2 { font-size: 28px; line-height: 36px; }<\/textarea><\/div>\r\n <div><label for=\"outc\">Output CSS<\/label><textarea id=\"outc\" readonly><\/textarea><\/div>\r\n <\/div>\r\n <div class=\"row\" style=\"margin-top:10px\"><div class=\"stat\" id=\"bstat\"><\/div><button class=\"btn\" id=\"bcopy\" style=\"flex:0 0 auto\">Copy CSS<\/button><\/div>\r\n<\/section>\r\n\r\n\r\n<section id=\"fluid\" class=\"panel hide\">\r\n <h2>Fluid typography with clamp()<\/h2>\r\n <div class=\"grid\">\r\n <div class=\"row\">\r\n <div><label>Min size (px)<\/label><input type=\"number\" id=\"f1\" value=\"18\"><\/div>\r\n <div><label>Max size (px)<\/label><input type=\"number\" id=\"f2\" value=\"48\"><\/div>\r\n <div><label>Min viewport (px)<\/label><input type=\"number\" id=\"f3\" value=\"360\"><\/div>\r\n <div><label>Max viewport (px)<\/label><input type=\"number\" id=\"f4\" value=\"1280\"><\/div>\r\n <\/div>\r\n <div class=\"readout\" style=\"margin:0\"><div><div class=\"big\" id=\"fout\" style=\"font-size:1.05rem;line-height:1.4\"><\/div><\/div><button class=\"btn\" id=\"fcopy\">Copy<\/button><\/div>\r\n <\/div>\r\n <label for=\"vw\" style=\"margin-top:14px\">Preview viewport: <b id=\"vwv\">800px<\/b> \u2192 font <b id=\"fsv\"><\/b><\/label>\r\n <input type=\"range\" id=\"vw\" min=\"320\" max=\"1440\" value=\"800\">\r\n <div class=\"fluid-view\"><div class=\"fluid-box\" id=\"fbox\"><div id=\"ftxt\">Fluid headline that adapts<\/div><\/div><\/div>\r\n<\/section>\r\n\r\n\r\n<section id=\"cheat\" class=\"panel hide\">\r\n <h2>Common sizes <span class=\"sub\" style=\"font-size:.85rem\">(click to copy)<\/span><\/h2>\r\n <div class=\"cheat\" id=\"cg\"><\/div>\r\n<\/section>\r\n<\/div>\r\n<div class=\"toast\" id=\"toast\"><\/div>\r\n\r\n<script>\r\nconst $=s=>document.querySelector(s),$$=s=>[...document.querySelectorAll(s)];\r\nconst fmt=(n,p=4)=>+(+n).toFixed(p)+'';\r\nlet dir='p2r',base=16;\r\ntry{base=+localStorage.getItem('pxrem-base')||16}catch(e){}\r\nfunction toast(t){const e=$('#toast');e.textContent=t;e.classList.add('on');clearTimeout(toast.t);toast.t=setTimeout(()=>e.classList.remove('on'),1400)}\r\nfunction copy(t){(navigator.clipboard?navigator.clipboard.writeText(t):Promise.reject()).then(()=>toast('Copied '+t.slice(0,24)),()=>{const a=document.createElement('textarea');a.value=t;document.body.appendChild(a);a.select();try{document.execCommand('copy');toast('Copied')}catch(e){toast('Copy failed')}a.remove()})}\r\n\r\n\/\/ theme\r\n$('#theme').onclick=()=>{const r=document.documentElement,d=r.dataset.theme?r.dataset.theme==='dark':matchMedia('(prefers-color-scheme:dark)').matches;r.dataset.theme=d?'light':'dark'};\r\n\/\/ tabs\r\n$$('.tabs button').forEach(b=>b.onclick=()=>{$$('.tabs button').forEach(x=>x.setAttribute('aria-selected',x===b));['conv','batch','fluid','cheat'].forEach(id=>$('#'+id).classList.toggle('hide',id!==b.dataset.t))});\r\n\r\n\/\/ presets\r\n[[16,'16px (default)'],[10,'10px (62.5%)'],[14,'14px'],[18,'18px'],[20,'20px']].forEach(([v,l])=>{const c=document.createElement('button');c.className='chip';c.textContent=l;c.dataset.v=v;c.onclick=()=>{$('#base').value=v;setBase(v)};$('#presets').appendChild(c)});\r\nfunction setBase(v){base=+v>0?+v:16;try{localStorage.setItem('pxrem-base',base)}catch(e){}\r\n $$('#presets .chip').forEach(c=>c.setAttribute('aria-pressed',+c.dataset.v===base));$('#bb').value=base;calc();toks();batch();fluid();cheat()}\r\n$('#base').oninput=e=>setBase(e.target.value);\r\n\r\n\/\/ converter\r\nfunction calc(src){const a=$('#a'),b=$('#b');\r\n if(dir==='p2r'){if(src!=='b')b.value=fmt(a.value\/base);else a.value=fmt(b.value*base)}\r\n else{if(src!=='b')b.value=fmt(a.value*base);else a.value=fmt(b.value\/base)}\r\n const o=dir==='p2r'?(src==='b'?fmt(a.value)+'px':fmt(b.value)+'rem'):(src==='b'?fmt(a.value)+'rem':fmt(b.value)+'px');\r\n $('#out').textContent=o;$('#eq').textContent=dir==='p2r'?`${fmt(a.value)}px \u00f7 ${base} = ${fmt(b.value)}rem`:`${fmt(a.value)}rem \u00d7 ${base} = ${fmt(b.value)}px`}\r\n$('#a').oninput=()=>calc();$('#b').oninput=()=>calc('b');\r\n$('#swap').onclick=()=>{dir=dir==='p2r'?'r2p':'p2r';$('#la').textContent=dir==='p2r'?'Pixels (px)':'Rem';$('#lb').textContent=dir==='p2r'?'Rem':'Pixels (px)';const t=$('#a').value;$('#a').value=$('#b').value;$('#b').value=t;calc()};\r\n$('#copy').onclick=()=>copy($('#out').textContent);\r\n\r\n\/\/ tokens + preview\r\nconst T=[['Heading',28],['Body',16],['Padding',24],['Radius',14]];\r\nfunction toks(){const h=$('#toks');if(!h.children.length){T.forEach((t,i)=>{const d=document.createElement('div');d.className='tok';d.innerHTML=`<span>${t[0]}<\/span><input type=\"number\" data-i=\"${i}\" value=\"${t[1]}\" aria-label=\"${t[0]} px\"><output><\/output>`;h.appendChild(d)});h.oninput=e=>{T[e.target.dataset.i][1]=+e.target.value||0;toks()};h.onclick=e=>{if(e.target.tagName==='OUTPUT')copy(e.target.textContent)}}\r\n $$('#toks .tok').forEach((d,i)=>d.querySelector('output').textContent=fmt(T[i][1]\/base)+'rem');preview()}\r\nfunction preview(){const r=+$('#root').value;$('#rootv').textContent=r+'px';\r\n const [h,b,p,rd]=T.map(t=>t[1]);\r\n const px=$('#mpx'),rm=$('#mrem');\r\n px.style.cssText=`padding:${p}px;border-radius:${rd}px;font-size:${b}px`;px.querySelector('h3').style.fontSize=h+'px';\r\n const k=r; \/\/ rem card: value in rem \u00d7 simulated root\r\n rm.style.cssText=`padding:${p\/base*k}px;border-radius:${rd\/base*k}px;font-size:${b\/base*k}px`;rm.querySelector('h3').style.fontSize=(h\/base*k)+'px'}\r\n$('#root').oninput=preview;\r\n\r\n\/\/ batch\r\n$$('[data-d]').forEach(c=>c.onclick=()=>{bd=c.dataset.d;$$('[data-d]').forEach(x=>x.setAttribute('aria-pressed',x===c));batch()});let bd='p2r';\r\nfunction batch(){const b=+$('#bb').value||16,p=+$('#bp').value,sk=$('#skip').checked;let n=0;\r\n const re=bd==='p2r'?\/(-?\\d*\\.?\\d+)px\\b\/g:\/(-?\\d*\\.?\\d+)rem\\b\/g;\r\n const out=$('#inp').value.replace(re,(m,v)=>{v=+v;if(bd==='p2r'&&sk&&Math.abs(v)<=1&&v!==0)return m;n++;if(v===0)return '0';return fmt(bd==='p2r'?v\/b:v*b,p)+(bd==='p2r'?'rem':'px')});\r\n $('#outc').value=out;$('#bstat').textContent=n+' value'+(n===1?'':'s')+' converted'}\r\n['#inp','#bb','#bp','#skip'].forEach(s=>$(s).oninput=batch);\r\n$('#bb').oninput=e=>setBase(e.target.value);\r\n$('#bcopy').onclick=()=>copy($('#outc').value);\r\n\r\n\/\/ fluid\r\nfunction fluid(){const [a,b,c,d]=['#f1','#f2','#f3','#f4'].map(s=>+$(s).value);if(d<=c||b===a){$('#fout').textContent='Max viewport must be larger than min viewport.';return}\r\n const s=(b-a)\/(d-c),i=a-s*c,sv=fmt(s*100),iv=fmt(i\/base);\r\n const css=`clamp(${fmt(a\/base)}rem, ${iv}rem ${+sv<0?'-':'+'} ${Math.abs(sv)}vw, ${fmt(b\/base)}rem)`;\r\n $('#fout').textContent=css;\r\n const vw=+$('#vw').value,f=Math.min(Math.max(i+s*vw,Math.min(a,b)),Math.max(a,b));\r\n $('#vwv').textContent=vw+'px';$('#fsv').textContent=fmt(f,1)+'px ('+fmt(f\/base)+'rem)';\r\n const bx=$('#fbox');bx.style.width=Math.min(vw,bx.parentElement.clientWidth-32)+'px';$('#ftxt').style.fontSize=(f*Math.min(1,(bx.parentElement.clientWidth-32)\/vw))+'px'}\r\n['#f1','#f2','#f3','#f4','#vw'].forEach(s=>$(s).oninput=fluid);\r\n$('#fcopy').onclick=()=>copy($('#fout').textContent);\r\naddEventListener('resize',fluid);\r\n\r\n\/\/ cheat\r\nfunction cheat(){const g=$('#cg');g.innerHTML='';[4,8,10,12,14,16,18,20,24,28,32,36,40,48,56,64,72,80,96,128].forEach(v=>{const c=document.createElement('button');c.className='cell';c.innerHTML=`<b>${fmt(v\/base)}rem<\/b><span>${v}px<\/span><div class=\"bar\" style=\"width:${Math.min(100,v)}%\"><\/div>`;c.onclick=()=>copy(fmt(v\/base)+'rem');g.appendChild(c)})}\r\n\r\n$('#base').value=base;setBase(base);calc();\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>PX to REM Converter \u2013 Responsive CSS Toolkit PX \u2192 REM Responsive CSS toolkit: convert units, batch-convert stylesheets, build fluid […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-486","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ongroundmedia.com\/index.php?rest_route=\/wp\/v2\/pages\/486","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ongroundmedia.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ongroundmedia.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ongroundmedia.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ongroundmedia.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=486"}],"version-history":[{"count":3,"href":"https:\/\/ongroundmedia.com\/index.php?rest_route=\/wp\/v2\/pages\/486\/revisions"}],"predecessor-version":[{"id":489,"href":"https:\/\/ongroundmedia.com\/index.php?rest_route=\/wp\/v2\/pages\/486\/revisions\/489"}],"wp:attachment":[{"href":"https:\/\/ongroundmedia.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=486"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n \t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nPX to REM Converter \u2013 Responsive CSS Toolkit<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bricolage+Grotesque:wght@500;700;800&family=JetBrains+Mono:wght@400;600&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n:root{--bg:#EEF1F5;--panel:#FFFFFF;--ink:#12202E;--mute:#5B6B7B;--line:#D5DCE4;--acc:#2457F5;--acc-ink:#fff;--hot:#F29A00;--ok:#12805C;\r\n--head:'Bricolage Grotesque',system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,Menlo,monospace;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}\r\n@media (prefers-color-scheme:dark){:root:not([data-theme=\"light\"]){--bg:#0C131B;--panel:#141E29;--ink:#E8EEF4;--mute:#8FA0B1;--line:#26343F;--acc:#6B8CFF;--acc-ink:#0C131B;--hot:#FFB224;--ok:#3DD6A0;color-scheme:dark}}\r\n:root[data-theme=\"dark\"]{--bg:#0C131B;--panel:#141E29;--ink:#E8EEF4;--mute:#8FA0B1;--line:#26343F;--acc:#6B8CFF;--acc-ink:#0C131B;--hot:#FFB224;--ok:#3DD6A0;color-scheme:dark}\r\n*{box-sizing:border-box}html{scroll-padding-top:env(safe-area-inset-top,0px)}\r\nbody{margin:0;background:var(--bg);color:var(--ink);font:16px\/1.5 system-ui,sans-serif;-webkit-font-smoothing:antialiased}\r\n.wrap{max-width:1080px;margin:0 auto;padding:20px 16px 48px}\r\nheader{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:20px}\r\nh1{font:800 clamp(1.7rem,5vw,2.8rem)\/1.05 var(--head);letter-spacing:-.03em;margin:0}\r\nh1 em{font-style:normal;color:var(--acc)}\r\n.sub{color:var(--mute);margin:8px 0 0;max-width:52ch}\r\nbutton,input,textarea{font:inherit;color:inherit}\r\n.ghost{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 12px;cursor:pointer}\r\n.tabs{display:flex;gap:6px;overflow-x:auto;padding:4px;background:var(--panel);border:1px solid var(--line);border-radius:14px;margin-bottom:16px}\r\n.tabs button{flex:1 0 auto;border:0;background:none;padding:10px 14px;border-radius:10px;cursor:pointer;font-weight:600;color:var(--mute);white-space:nowrap}\r\n.tabs button[aria-selected=true]{background:var(--acc);color:var(--acc-ink)}\r\nbutton:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--acc);outline-offset:2px}\r\n.panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:20px}\r\n.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}\r\n@media(max-width:820px){.grid{grid-template-columns:1fr}}\r\nlabel{display:block;font-size:.8rem;color:var(--mute);margin-bottom:6px;font-weight:600}\r\ninput[type=number],textarea{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-family:var(--mono)}\r\ntextarea{min-height:200px;resize:vertical;font-size:.85rem}\r\ninput[type=range]{width:100%;accent-color:var(--acc)}\r\n.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}\r\n.row>*{flex:1 1 120px}\r\n.swap{flex:0 0 auto!important;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--bg);cursor:pointer;font-size:1.1rem}\r\n.readout{margin:16px 0;padding:18px;border-radius:14px;background:var(--ink);color:var(--bg);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}\r\n.readout .big{font:700 clamp(1.8rem,6vw,3rem)\/1 var(--mono);letter-spacing:-.04em;word-break:break-all}\r\n.readout small{display:block;opacity:.65;font-family:var(--mono);margin-top:6px}\r\n.btn{background:var(--hot);color:#1b1200;border:0;border-radius:10px;padding:10px 16px;font-weight:700;cursor:pointer}\r\n.chips{display:flex;gap:8px;flex-wrap:wrap}\r\n.chip{border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:5px 12px;cursor:pointer;font-size:.85rem}\r\n.chip[aria-pressed=true]{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}\r\nh2{font:700 1.15rem var(--head);margin:0 0 12px}\r\n.tok{display:grid;grid-template-columns:90px 1fr 1fr;gap:8px;align-items:center;margin-bottom:8px;font-size:.9rem}\r\n.tok output{font-family:var(--mono);color:var(--acc);font-weight:600}\r\n.stage{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px;background:repeating-linear-gradient(0deg,transparent 0 15px,var(--line) 15px 16px),var(--bg);border-radius:14px;margin-top:12px;align-items:start}\r\n@media(max-width:520px){.stage{grid-template-columns:1fr}}\r\n.stage p.cap{margin:0 0 8px;font:600 .75rem var(--mono);color:var(--mute)}\r\n.mock{background:var(--panel);border:1px solid var(--line);color:var(--ink);box-shadow:0 1px 0 var(--line)}\r\n.mock h3{margin:0 0 .35em;font-family:var(--head)}.mock p{margin:0 0 .8em;color:var(--mute)}\r\n.mock span{display:inline-block;background:var(--acc);color:var(--acc-ink);padding:.4em .9em;border-radius:.5em;font-weight:600}\r\n.pill{display:inline-block;font:600 .7rem var(--mono);padding:2px 8px;border-radius:99px;margin-left:6px}\r\n.pill.fx{background:var(--line);color:var(--mute)}.pill.rm{background:var(--ok);color:var(--bg)}\r\n.opts{display:flex;gap:16px;flex-wrap:wrap;margin:10px 0;font-size:.9rem;align-items:center}\r\n.opts input[type=number]{width:70px;padding:6px 8px}\r\n.stat{font:600 .85rem var(--mono);color:var(--ok);margin:8px 0}\r\n.cheat{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}\r\n.cell{border:1px solid var(--line);background:var(--bg);border-radius:12px;padding:12px;cursor:pointer;text-align:left}\r\n.cell:hover{border-color:var(--acc)}\r\n.cell b{display:block;font:700 1.1rem var(--mono)}.cell span{color:var(--mute);font:.8rem var(--mono)}\r\n.bar{height:6px;border-radius:3px;background:var(--acc);margin-top:8px}\r\n.fluid-view{border:1px dashed var(--line);border-radius:12px;padding:16px;margin-top:12px;overflow:hidden;background:var(--bg)}\r\n.fluid-box{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px;margin:0 auto;overflow:hidden;transition:width .05s}\r\n.fluid-box div{font-family:var(--head);font-weight:800;line-height:1.1}\r\n.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,30px);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:99px;opacity:0;transition:.25s;font-weight:600;pointer-events:none}\r\n.toast.on{opacity:1;transform:translate(-50%,0)}\r\n.hide{display:none}\r\n@media(prefers-reduced-motion:reduce){*{transition:none!important}}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"wrap\">\r\n<header>\r\n <div>\r\n <h1>PX <em>\u2192<\/em> REM<\/h1>\r\n <p class=\"sub\">Responsive CSS toolkit: convert units, batch-convert stylesheets, build fluid <code>clamp()<\/code> values and see the result live.<\/p>\r\n <\/div>\r\n <button class=\"ghost\" id=\"theme\" aria-label=\"Toggle theme\">Theme<\/button>\r\n<\/header>\r\n\r\n<div class=\"tabs\" role=\"tablist\">\r\n <button role=\"tab\" aria-selected=\"true\" data-t=\"conv\">Converter<\/button>\r\n <button role=\"tab\" aria-selected=\"false\" data-t=\"batch\">CSS Batch<\/button>\r\n <button role=\"tab\" aria-selected=\"false\" data-t=\"fluid\">Fluid clamp()<\/button>\r\n <button role=\"tab\" aria-selected=\"false\" data-t=\"cheat\">Cheat sheet<\/button>\r\n<\/div>\r\n\r\n\r\n<section id=\"conv\" class=\"panel\">\r\n <div class=\"grid\">\r\n <div>\r\n <h2>Quick convert<\/h2>\r\n <label for=\"base\">Root font-size (px)<\/label>\r\n <div class=\"chips\" id=\"presets\" style=\"margin-bottom:12px\"><\/div>\r\n <input type=\"number\" id=\"base\" value=\"16\" min=\"1\" step=\"any\">\r\n <div class=\"row\" style=\"margin-top:14px\">\r\n <div><label for=\"a\" id=\"la\">Pixels (px)<\/label><input type=\"number\" id=\"a\" value=\"24\" step=\"any\"><\/div>\r\n <button class=\"swap\" id=\"swap\" aria-label=\"Swap direction\">\u21c4<\/button>\r\n <div><label for=\"b\" id=\"lb\">Rem<\/label><input type=\"number\" id=\"b\" step=\"any\"><\/div>\r\n <\/div>\r\n <div class=\"readout\">\r\n <div><div class=\"big\" id=\"out\">1.5rem<\/div><small id=\"eq\"><\/small><\/div>\r\n <button class=\"btn\" id=\"copy\">Copy value<\/button>\r\n <\/div>\r\n <p class=\"sub\" style=\"font-size:.85rem\">Tip: <code>62.5%<\/code> on <code>html<\/code> makes 1rem = 10px, so 24px becomes 2.4rem. Pick the 10px preset to match.<\/p>\r\n <\/div>\r\n <div>\r\n <h2>Design tokens<\/h2>\r\n <div id=\"toks\"><\/div>\r\n <label for=\"root\" style=\"margin-top:14px\">Simulate user's browser font-size: <b id=\"rootv\">16px<\/b><\/label>\r\n <input type=\"range\" id=\"root\" min=\"12\" max=\"28\" value=\"16\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"stage\">\r\n <div><p class=\"cap\">px <span class=\"pill fx\">fixed<\/span><\/p><div class=\"mock\" id=\"mpx\"><h3>Pro plan<\/h3><p>Billed yearly, cancel anytime.<\/p><span>Start free<\/span><\/div><\/div>\r\n <div><p class=\"cap\">rem <span class=\"pill rm\">scales<\/span><\/p><div class=\"mock\" id=\"mrem\"><h3>Pro plan<\/h3><p>Billed yearly, cancel anytime.<\/p><span>Start free<\/span><\/div><\/div>\r\n <\/div>\r\n <p class=\"sub\" style=\"font-size:.85rem\">Move the slider: the rem card follows the user's font-size preference, the px card never does. That is the accessibility win.<\/p>\r\n<\/section>\r\n\r\n\r\n<section id=\"batch\" class=\"panel hide\">\r\n <h2>Convert a whole stylesheet<\/h2>\r\n <div class=\"opts\">\r\n <span class=\"chips\"><button class=\"chip\" data-d=\"p2r\" aria-pressed=\"true\">px \u2192 rem<\/button><button class=\"chip\" data-d=\"r2p\" aria-pressed=\"false\">rem \u2192 px<\/button><\/span>\r\n <label style=\"margin:0\">Base <input type=\"number\" id=\"bb\" value=\"16\"><\/label>\r\n <label style=\"margin:0\">Decimals <input type=\"number\" id=\"bp\" value=\"4\" min=\"0\" max=\"6\"><\/label>\r\n <label style=\"margin:0\"><input type=\"checkbox\" id=\"skip\" checked> Keep 1px borders<\/label>\r\n <\/div>\r\n <div class=\"grid\">\r\n <div><label for=\"inp\">Input CSS<\/label><textarea id=\"inp\" spellcheck=\"false\">.card {\r\n padding: 24px 32px;\r\n margin-bottom: 16px;\r\n border: 1px solid #ddd;\r\n border-radius: 12px;\r\n font-size: 18px;\r\n box-shadow: 0 4px 12px rgba(0,0,0,.1);\r\n}\r\n.card h2 { font-size: 28px; line-height: 36px; }<\/textarea><\/div>\r\n <div><label for=\"outc\">Output CSS<\/label><textarea id=\"outc\" readonly><\/textarea><\/div>\r\n <\/div>\r\n <div class=\"row\" style=\"margin-top:10px\"><div class=\"stat\" id=\"bstat\"><\/div><button class=\"btn\" id=\"bcopy\" style=\"flex:0 0 auto\">Copy CSS<\/button><\/div>\r\n<\/section>\r\n\r\n\r\n<section id=\"fluid\" class=\"panel hide\">\r\n <h2>Fluid typography with clamp()<\/h2>\r\n <div class=\"grid\">\r\n <div class=\"row\">\r\n <div><label>Min size (px)<\/label><input type=\"number\" id=\"f1\" value=\"18\"><\/div>\r\n <div><label>Max size (px)<\/label><input type=\"number\" id=\"f2\" value=\"48\"><\/div>\r\n <div><label>Min viewport (px)<\/label><input type=\"number\" id=\"f3\" value=\"360\"><\/div>\r\n <div><label>Max viewport (px)<\/label><input type=\"number\" id=\"f4\" value=\"1280\"><\/div>\r\n <\/div>\r\n <div class=\"readout\" style=\"margin:0\"><div><div class=\"big\" id=\"fout\" style=\"font-size:1.05rem;line-height:1.4\"><\/div><\/div><button class=\"btn\" id=\"fcopy\">Copy<\/button><\/div>\r\n <\/div>\r\n <label for=\"vw\" style=\"margin-top:14px\">Preview viewport: <b id=\"vwv\">800px<\/b> \u2192 font <b id=\"fsv\"><\/b><\/label>\r\n <input type=\"range\" id=\"vw\" min=\"320\" max=\"1440\" value=\"800\">\r\n <div class=\"fluid-view\"><div class=\"fluid-box\" id=\"fbox\"><div id=\"ftxt\">Fluid headline that adapts<\/div><\/div><\/div>\r\n<\/section>\r\n\r\n\r\n<section id=\"cheat\" class=\"panel hide\">\r\n <h2>Common sizes <span class=\"sub\" style=\"font-size:.85rem\">(click to copy)<\/span><\/h2>\r\n <div class=\"cheat\" id=\"cg\"><\/div>\r\n<\/section>\r\n<\/div>\r\n<div class=\"toast\" id=\"toast\"><\/div>\r\n\r\n<script>\r\nconst $=s=>document.querySelector(s),$$=s=>[...document.querySelectorAll(s)];\r\nconst fmt=(n,p=4)=>+(+n).toFixed(p)+'';\r\nlet dir='p2r',base=16;\r\ntry{base=+localStorage.getItem('pxrem-base')||16}catch(e){}\r\nfunction toast(t){const e=$('#toast');e.textContent=t;e.classList.add('on');clearTimeout(toast.t);toast.t=setTimeout(()=>e.classList.remove('on'),1400)}\r\nfunction copy(t){(navigator.clipboard?navigator.clipboard.writeText(t):Promise.reject()).then(()=>toast('Copied '+t.slice(0,24)),()=>{const a=document.createElement('textarea');a.value=t;document.body.appendChild(a);a.select();try{document.execCommand('copy');toast('Copied')}catch(e){toast('Copy failed')}a.remove()})}\r\n\r\n\/\/ theme\r\n$('#theme').onclick=()=>{const r=document.documentElement,d=r.dataset.theme?r.dataset.theme==='dark':matchMedia('(prefers-color-scheme:dark)').matches;r.dataset.theme=d?'light':'dark'};\r\n\/\/ tabs\r\n$$('.tabs button').forEach(b=>b.onclick=()=>{$$('.tabs button').forEach(x=>x.setAttribute('aria-selected',x===b));['conv','batch','fluid','cheat'].forEach(id=>$('#'+id).classList.toggle('hide',id!==b.dataset.t))});\r\n\r\n\/\/ presets\r\n[[16,'16px (default)'],[10,'10px (62.5%)'],[14,'14px'],[18,'18px'],[20,'20px']].forEach(([v,l])=>{const c=document.createElement('button');c.className='chip';c.textContent=l;c.dataset.v=v;c.onclick=()=>{$('#base').value=v;setBase(v)};$('#presets').appendChild(c)});\r\nfunction setBase(v){base=+v>0?+v:16;try{localStorage.setItem('pxrem-base',base)}catch(e){}\r\n $$('#presets .chip').forEach(c=>c.setAttribute('aria-pressed',+c.dataset.v===base));$('#bb').value=base;calc();toks();batch();fluid();cheat()}\r\n$('#base').oninput=e=>setBase(e.target.value);\r\n\r\n\/\/ converter\r\nfunction calc(src){const a=$('#a'),b=$('#b');\r\n if(dir==='p2r'){if(src!=='b')b.value=fmt(a.value\/base);else a.value=fmt(b.value*base)}\r\n else{if(src!=='b')b.value=fmt(a.value*base);else a.value=fmt(b.value\/base)}\r\n const o=dir==='p2r'?(src==='b'?fmt(a.value)+'px':fmt(b.value)+'rem'):(src==='b'?fmt(a.value)+'rem':fmt(b.value)+'px');\r\n $('#out').textContent=o;$('#eq').textContent=dir==='p2r'?`${fmt(a.value)}px \u00f7 ${base} = ${fmt(b.value)}rem`:`${fmt(a.value)}rem \u00d7 ${base} = ${fmt(b.value)}px`}\r\n$('#a').oninput=()=>calc();$('#b').oninput=()=>calc('b');\r\n$('#swap').onclick=()=>{dir=dir==='p2r'?'r2p':'p2r';$('#la').textContent=dir==='p2r'?'Pixels (px)':'Rem';$('#lb').textContent=dir==='p2r'?'Rem':'Pixels (px)';const t=$('#a').value;$('#a').value=$('#b').value;$('#b').value=t;calc()};\r\n$('#copy').onclick=()=>copy($('#out').textContent);\r\n\r\n\/\/ tokens + preview\r\nconst T=[['Heading',28],['Body',16],['Padding',24],['Radius',14]];\r\nfunction toks(){const h=$('#toks');if(!h.children.length){T.forEach((t,i)=>{const d=document.createElement('div');d.className='tok';d.innerHTML=`<span>${t[0]}<\/span><input type=\"number\" data-i=\"${i}\" value=\"${t[1]}\" aria-label=\"${t[0]} px\"><output><\/output>`;h.appendChild(d)});h.oninput=e=>{T[e.target.dataset.i][1]=+e.target.value||0;toks()};h.onclick=e=>{if(e.target.tagName==='OUTPUT')copy(e.target.textContent)}}\r\n $$('#toks .tok').forEach((d,i)=>d.querySelector('output').textContent=fmt(T[i][1]\/base)+'rem');preview()}\r\nfunction preview(){const r=+$('#root').value;$('#rootv').textContent=r+'px';\r\n const [h,b,p,rd]=T.map(t=>t[1]);\r\n const px=$('#mpx'),rm=$('#mrem');\r\n px.style.cssText=`padding:${p}px;border-radius:${rd}px;font-size:${b}px`;px.querySelector('h3').style.fontSize=h+'px';\r\n const k=r; \/\/ rem card: value in rem \u00d7 simulated root\r\n rm.style.cssText=`padding:${p\/base*k}px;border-radius:${rd\/base*k}px;font-size:${b\/base*k}px`;rm.querySelector('h3').style.fontSize=(h\/base*k)+'px'}\r\n$('#root').oninput=preview;\r\n\r\n\/\/ batch\r\n$$('[data-d]').forEach(c=>c.onclick=()=>{bd=c.dataset.d;$$('[data-d]').forEach(x=>x.setAttribute('aria-pressed',x===c));batch()});let bd='p2r';\r\nfunction batch(){const b=+$('#bb').value||16,p=+$('#bp').value,sk=$('#skip').checked;let n=0;\r\n const re=bd==='p2r'?\/(-?\\d*\\.?\\d+)px\\b\/g:\/(-?\\d*\\.?\\d+)rem\\b\/g;\r\n const out=$('#inp').value.replace(re,(m,v)=>{v=+v;if(bd==='p2r'&&sk&&Math.abs(v)<=1&&v!==0)return m;n++;if(v===0)return '0';return fmt(bd==='p2r'?v\/b:v*b,p)+(bd==='p2r'?'rem':'px')});\r\n $('#outc').value=out;$('#bstat').textContent=n+' value'+(n===1?'':'s')+' converted'}\r\n['#inp','#bb','#bp','#skip'].forEach(s=>$(s).oninput=batch);\r\n$('#bb').oninput=e=>setBase(e.target.value);\r\n$('#bcopy').onclick=()=>copy($('#outc').value);\r\n\r\n\/\/ fluid\r\nfunction fluid(){const [a,b,c,d]=['#f1','#f2','#f3','#f4'].map(s=>+$(s).value);if(d<=c||b===a){$('#fout').textContent='Max viewport must be larger than min viewport.';return}\r\n const s=(b-a)\/(d-c),i=a-s*c,sv=fmt(s*100),iv=fmt(i\/base);\r\n const css=`clamp(${fmt(a\/base)}rem, ${iv}rem ${+sv<0?'-':'+'} ${Math.abs(sv)}vw, ${fmt(b\/base)}rem)`;\r\n $('#fout').textContent=css;\r\n const vw=+$('#vw').value,f=Math.min(Math.max(i+s*vw,Math.min(a,b)),Math.max(a,b));\r\n $('#vwv').textContent=vw+'px';$('#fsv').textContent=fmt(f,1)+'px ('+fmt(f\/base)+'rem)';\r\n const bx=$('#fbox');bx.style.width=Math.min(vw,bx.parentElement.clientWidth-32)+'px';$('#ftxt').style.fontSize=(f*Math.min(1,(bx.parentElement.clientWidth-32)\/vw))+'px'}\r\n['#f1','#f2','#f3','#f4','#vw'].forEach(s=>$(s).oninput=fluid);\r\n$('#fcopy').onclick=()=>copy($('#fout').textContent);\r\naddEventListener('resize',fluid);\r\n\r\n\/\/ cheat\r\nfunction cheat(){const g=$('#cg');g.innerHTML='';[4,8,10,12,14,16,18,20,24,28,32,36,40,48,56,64,72,80,96,128].forEach(v=>{const c=document.createElement('button');c.className='cell';c.innerHTML=`<b>${fmt(v\/base)}rem<\/b><span>${v}px<\/span><div class=\"bar\" style=\"width:${Math.min(100,v)}%\"><\/div>`;c.onclick=()=>copy(fmt(v\/base)+'rem');g.appendChild(c)})}\r\n\r\n$('#base').value=base;setBase(base);calc();\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>PX to REM Converter \u2013 Responsive CSS Toolkit PX \u2192 REM Responsive CSS toolkit: convert units, batch-convert stylesheets, build fluid […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-486","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ongroundmedia.com\/index.php?rest_route=\/wp\/v2\/pages\/486","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ongroundmedia.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ongroundmedia.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ongroundmedia.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ongroundmedia.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=486"}],"version-history":[{"count":3,"href":"https:\/\/ongroundmedia.com\/index.php?rest_route=\/wp\/v2\/pages\/486\/revisions"}],"predecessor-version":[{"id":489,"href":"https:\/\/ongroundmedia.com\/index.php?rest_route=\/wp\/v2\/pages\/486\/revisions\/489"}],"wp:attachment":[{"href":"https:\/\/ongroundmedia.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=486"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}