{"id":3437,"date":"2025-07-07T16:45:16","date_gmt":"2025-07-07T14:45:16","guid":{"rendered":"https:\/\/24-1.com\/rem-calculator\/"},"modified":"2026-09-25T11:22:55","modified_gmt":"2026-09-25T09:22:55","slug":"rem-calculator","status":"publish","type":"page","link":"https:\/\/24-1.com\/en\/rem-calculator\/","title":{"rendered":"Rem Calculator"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3437\" class=\"elementor elementor-3437 elementor-1960\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2c18cc3 e-flex e-con-boxed e-con e-parent\" data-id=\"2c18cc3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-13d6974 elementor-widget elementor-widget-html\" data-id=\"13d6974\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n  .rem-calculator {\n    max-width: 400px;\n    margin: 0 auto;\n    padding: 20px;\n    border: 1px solid #ddd;\n    border-radius: 8px;\n    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n    background-color: #f9f9f9;\n    display: flex;\n    flex-direction: column;\n    position: relative;\n  }\n  .rem-calculator h2 {\n    text-align: center;\n    font-size: 20px;\n    margin-bottom: 20px;\n    color: #333;\n  }\n  .rem-calculator label {\n    font-size: 16px;\n    margin-top: 10px;\n    color: #555;\n  }\n  .rem-calculator input {\n    width: calc(100% - 22px);\n    padding: 10px;\n    margin-top: 5px;\n    margin-bottom: 20px;\n    border: 1px solid #ccc;\n    border-radius: 4px;\n    font-size: 16px;\n    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);\n  }\n  .rem-calculator .result {\n    margin-top: 20px;\n    padding: 15px;\n    text-align: center;\n    font-size: 16px;\n    color: #333;\n    background-color: #e9ecef;\n    border-radius: 5px;\n    border: 1px solid #ddd;\n    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n  }\n  .copy-button {\n    padding: 10px 20px;\n    margin-top: 10px;\n    background-color: #4CAF50;\n    color: white;\n    border: none;\n    border-radius: 4px;\n    cursor: pointer;\n    font-size: 16px;\n  }\n  .copy-button:hover {\n    background-color: #45a049;\n  }\n  .reference-value-container {\n    display: flex;\n    gap: 10px;\n    margin-top: 10px;\n  }\n  .reference-value-container input {\n    width: 45%;\n  }\n<\/style>\n\n<div class=\"rem-calculator\">\n  <h2>REM Value Calculation<\/h2>\n  \n  <label for=\"viewport-input\">Enter Viewport Width (px):<\/label>\n  <input type=\"number\" id=\"viewport-input\" placeholder=\"e.g. 1466\">\n  \n  <div class=\"reference-value-container\">\n    <label for=\"element-width\">Reference Element Width (px):<\/label>\n    <input type=\"number\" id=\"element-width\" placeholder=\"e.g. 1920\">\n  <\/div>\n  \n  <label for=\"vw-input\">Reference Size (vw) Automatically Calculated:<\/label>\n  <input type=\"number\" id=\"vw-input\" placeholder=\"Calculation is Automatic\" readonly>\n  \n  <label for=\"pixel-input\">Enter Pixels:<\/label>\n  <input type=\"number\" id=\"pixel-input\" placeholder=\"e.g. 67\">\n  \n  <div class=\"result\" id=\"result\"><\/div>\n  \n  <button class=\"copy-button\" id=\"copy-btn\" style=\"display:none;\">Copy<\/button>\n<\/div>\n\n<script>\n  \/\/ Funktion f\u00fcr das Kopieren in die Zwischenablage \u2013 mit Fallback\n  function copyToClipboard(text) {\n    if (navigator.clipboard && window.isSecureContext) {\n      return navigator.clipboard.writeText(text);\n    } else {\n      \/\/ Fallback: Erstelle ein verstecktes Textfeld und kopiere daraus\n      let textArea = document.createElement(\"textarea\");\n      textArea.value = text;\n      textArea.style.position = \"fixed\";\n      textArea.style.top = \"-9999px\";\n      document.body.appendChild(textArea);\n      textArea.focus();\n      textArea.select();\n      return new Promise((resolve, reject) => {\n        try {\n          if (document.execCommand('copy')) {\n            resolve();\n          } else {\n            reject(new Error(\"Kopier-Befehl fehlgeschlagen\"));\n          }\n        } catch (err) {\n          reject(err);\n        } finally {\n          document.body.removeChild(textArea);\n        }\n      });\n    }\n  }\n\n  function calculateRem() {\n    const viewportWidth = parseFloat(document.getElementById('viewport-input').value);\n    const elementWidth = parseFloat(document.getElementById('element-width').value);\n    const pixelValue = parseFloat(document.getElementById('pixel-input').value);\n    const copyBtn = document.getElementById('copy-btn');\n    \n    \/\/ Button-Text zur\u00fccksetzen\n    copyBtn.innerText = \"Kopieren\";\n    \n    \/\/ 1. Automatische Berechnung des Referenzwerts (Bezuggr\u00f6\u00dfe)\n    if (!isNaN(viewportWidth) && viewportWidth > 0 && !isNaN(elementWidth) && elementWidth > 0) {\n      \/\/ Berechnung: (Breite des Referenzelements \/ Viewport-Breite) * 1000\n      const referenceValue = ((elementWidth \/ viewportWidth) * 1000).toFixed(3);\n      document.getElementById('vw-input').value = referenceValue;\n    } else {\n      document.getElementById('vw-input').value = \"\";\n    }\n    \n    \/\/ 2. REM-Berechnung, falls alle n\u00f6tigen Werte vorhanden sind\n    const vwValue = parseFloat(document.getElementById('vw-input').value);\n    if (!isNaN(pixelValue) && !isNaN(viewportWidth) && !isNaN(vwValue) && viewportWidth > 0) {\n      \/\/ 1vw entspricht (Viewport-Breite \/ 100) Pixel\n      const vw = viewportWidth \/ 100;\n      const remBaseSize = vwValue * vw;\n      if (remBaseSize === 0) return;\n      const remValue = (pixelValue \/ remBaseSize).toFixed(3);\n      \n      document.getElementById('result').innerHTML = `\n        <p>Viewport-Breite: ${viewportWidth}px<\/p>\n        <p>Bezuggr\u00f6\u00dfe (vw): ${vwValue}vw<\/p>\n        <p>Basisgr\u00f6\u00dfe (${vwValue}vw): ${remBaseSize.toFixed(2)}px<\/p>\n        <p>${pixelValue}px entsprechen ${remValue}rem<\/p>\n      `;\n      \n      copyBtn.style.display = 'inline-block';\n      \n      copyBtn.onclick = function() {\n        copyToClipboard(remValue)\n          .then(() => {\n            copyBtn.innerText = \"Erfolgreich kopiert\";\n          })\n          .catch(err => {\n            alert('Fehler beim Kopieren: ' + err);\n          });\n      };\n    } else {\n      document.getElementById('result').innerHTML = \"\";\n      copyBtn.style.display = 'none';\n    }\n  }\n  \n  \/\/ Event-Listener: Jede Eingabe l\u00f6st die Neuberechnung aus\n  document.getElementById('viewport-input').addEventListener('input', calculateRem);\n  document.getElementById('element-width').addEventListener('input', calculateRem);\n  document.getElementById('pixel-input').addEventListener('input', calculateRem);\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>REM Value Calculation Enter Viewport Width (px): Reference Element Width (px): Reference Size (vw) Automatically Calculated: Enter Pixels: Copy<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":40,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"class_list":["post-3437","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/24-1.com\/en\/wp-json\/wp\/v2\/pages\/3437","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/24-1.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/24-1.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/24-1.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/24-1.com\/en\/wp-json\/wp\/v2\/comments?post=3437"}],"version-history":[{"count":1,"href":"https:\/\/24-1.com\/en\/wp-json\/wp\/v2\/pages\/3437\/revisions"}],"predecessor-version":[{"id":3438,"href":"https:\/\/24-1.com\/en\/wp-json\/wp\/v2\/pages\/3437\/revisions\/3438"}],"wp:attachment":[{"href":"https:\/\/24-1.com\/en\/wp-json\/wp\/v2\/media?parent=3437"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}