Laboratorium jednostek px i rem

<main class="rem-lab"><header><h1>px ↔ rem</h1><p>Przelicz piksele na rem.</p></header><section class="rem-controls"><div><label for="pixels">Piksele</label><input id="pixels" type="number" value="48" min="8" max="160" step="1"></div><div><label for="base">Baza (px)</label><select id="base"><option value="16">16</option><option value="18">18</option><option value="20">20</option></select></div><div class="result"><span>Wartość rem</span><output id="rem-output">3 rem</output></div></section><div class="type-stage"><span id="specimen">Aa</span><p>Rozmiar podglądu: <b id="size-label">48px</b></p></div><code id="css-output">font-size: 3rem;</code><p id="status" role="status"></p></main>

*{box-sizing:border-box}body{margin:0;min-height:100vh;padding:24px;font:16px/1.45 system-ui,sans-serif;display:grid;align-content:center;color:#17212e;background:#f5f7fb}main{width:min(100%,850px);margin:auto}h1,h2,p{margin:0 0 16px}h1{font-size:clamp(26px,4vw,42px);line-height:1.1}h2{font-size:21px}label{display:block;font-weight:600;margin-bottom:6px}input,select,textarea,button{font:inherit;max-width:100%}input:not([type=radio]):not([type=checkbox]):not([type=range]):not([type=color]),select,textarea{width:100%;padding:10px 12px;background:#fff;color:#17212e;border:1px solid #748091;min-height:44px;border-radius:0}textarea{resize:vertical}button{min-height:44px;padding:10px 18px;border:1px solid currentColor;background:#17212e;color:white;cursor:pointer;border-radius:0}button:hover{filter:brightness(1.15)}button:disabled{cursor:default;opacity:.55}button.secondary{background:transparent;color:inherit}input[type=radio],input[type=checkbox]{width:20px;height:20px;vertical-align:middle;accent-color:var(--accent,#3155c7)}input[type=range]{width:100%;accent-color:var(--accent,#3155c7);min-height:32px}input[type=color]{width:100%;min-height:52px;cursor:pointer;background:transparent;border:1px solid currentColor}fieldset{border:0;padding:0;margin:0}legend{font-weight:600;margin-bottom:12px}output{display:block}small,.note{font-size:13px}p.note{margin:10px 0 0}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--accent,#3155c7);outline-offset:3px}[hidden]{display:none!important}.field{margin-bottom:16px}.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.status{min-height:24px;margin-top:14px;font-weight:600;overflow-wrap:anywhere}.muted{color:#4b5868}.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}@media(max-width:560px){body{padding:18px}.two{grid-template-columns:1fr}h1{font-size:29px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}body{background:#fff;color:#243762;--accent:#335ea7}.rem-lab{max-width:790px}.rem-lab header{display:flex;justify-content:space-between;align-items:baseline;gap:20px;border-bottom:2px solid #243762;margin-bottom:22px}.rem-lab h1{font:clamp(40px,7vw,76px)/1 Georgia,serif}.rem-controls{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}.result{align-self:end;border-left:1px solid #8393b3;padding-left:20px}.result span{font-size:13px}.result output{font-size:32px;font-family:Georgia,serif}.type-stage{background:#eaf0ff;margin:25px 0;min-height:150px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px;overflow:hidden}.type-stage span{font:48px Georgia,serif}.type-stage p{font-size:13px;margin:0}.rem-lab code{display:block;padding:12px;background:#243762;color:white;font-size:15px}@media(max-width:560px){.rem-lab header{display:block}.rem-controls{grid-template-columns:1fr 1fr}.result{grid-column:1/-1;border-left:0;border-top:1px solid #8393b3;padding:12px 0 0}.type-stage{gap:10px;flex-wrap:wrap;min-height:130px}}

(()=>{const q=s=>document.querySelector(s);const all=s=>[...document.querySelectorAll(s)];const update=()=>{const px=Number(q('#pixels').value);if(!q('#pixels').checkValidity()||q('#pixels').value===''){q('#status').textContent='Podaj rozmiar od 8 do 160 px.';return}q('#status').textContent='';const rem=Number((px/Number(q('#base').value)).toFixed(4));q('#rem-output').textContent=rem+' rem';q('#css-output').textContent='font-size: '+rem+'rem;';q('#specimen').style.fontSize=px+'px';q('#size-label').textContent=px+'px';};q('#pixels').oninput=update;q('#base').onchange=update;update();})();