{"id":1833,"date":"2023-02-17T12:43:18","date_gmt":"2023-02-17T12:43:18","guid":{"rendered":"https:\/\/www.tools.keywordfinder.us\/?page_id=1833"},"modified":"2023-02-17T12:43:18","modified_gmt":"2023-02-17T12:43:18","slug":"px-to-rem","status":"publish","type":"page","link":"https:\/\/tools.billionsideas.com\/de\/px-to-rem\/","title":{"rendered":"PX to REM"},"content":{"rendered":"<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-base-3-background-color has-background is-layout-flow wp-block-column-is-layout-flow\">\n<section><h1>PX to REM<\/h1>\n      <div class=\"px-rem-calculator\">\n  <label for=\"px-input\">Enter pixels:<\/label>\n  <input type=\"number\" id=\"px-input\" name=\"px-input\">\n  <button id=\"convert-button\">Convert<\/button>\n  <label for=\"rem-output\">rem:<\/label>\n  <output id=\"rem-output\"><\/output>\n<\/div>\n<\/section>\n<style>\n.px-rem-calculator {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 2em;\n  background-color: transparent;\n  border-radius: 8px;\n  \n}\n\nlabel {\n  font-size: 1.2em;\n  margin-bottom: 0.5em;\n}\n\ninput, button, output {\n  font-size: 1.2em;\n  padding: 0.5em;\n  border-radius: 4px;\n  border: none;\n  margin-bottom: 1em;\n}\n\n#px-input {\n  background-color: #fff;\n  width: 20%;\n}\n\n#convert-button {\n  background-color: #4CAF50;\n  color: #fff;\n  cursor: pointer;\n}\n\n#convert-button:hover {\n  background-color: #3e8e41;\n}\n\n#rem-output {\n  background-color: #fff;\n  width: 20%;\n  text-align: center;\n}\nsection{\n         margin-top:60px;\n        width: 100%;\n        max-width: 970px;\n        background-color: #fff;\n        border: 1px solid #ddd;\n        padding: 25px;\n      }\n\n<\/style>\n\n<script>\nconst pxInput = document.getElementById(\"px-input\");\nconst convertButton = document.getElementById(\"convert-button\");\nconst remOutput = document.getElementById(\"rem-output\");\n\nconst baseFontSize = 16; \/\/ set your base font size\nconvertButton.addEventListener(\"click\", function() {\n  const px = pxInput.value;\n  const rem = px \/ baseFontSize;\n  remOutput.value = rem + \"rem\";\n});\n\n<\/script><\/center><\/center>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>PX to REM Enter pixels: Convert rem:<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","footnotes":""},"class_list":["post-1833","page","type-page","status-publish"],"taxonomy_info":[],"featured_image_src_large":false,"author_info":{"display_name":"Billions Ideas","author_link":"https:\/\/tools.billionsideas.com\/de\/author\/loginbillionsideas-com\/"},"comment_info":0,"jetpack-related-posts":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/tools.billionsideas.com\/de\/wp-json\/wp\/v2\/pages\/1833","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tools.billionsideas.com\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tools.billionsideas.com\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tools.billionsideas.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tools.billionsideas.com\/de\/wp-json\/wp\/v2\/comments?post=1833"}],"version-history":[{"count":0,"href":"https:\/\/tools.billionsideas.com\/de\/wp-json\/wp\/v2\/pages\/1833\/revisions"}],"wp:attachment":[{"href":"https:\/\/tools.billionsideas.com\/de\/wp-json\/wp\/v2\/media?parent=1833"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}