{"id":4002,"date":"2026-10-14T18:47:45","date_gmt":"2026-10-14T17:47:45","guid":{"rendered":"https:\/\/wpcalc.com\/de\/einheitenrechner\/css-einheiten-umrechner\/"},"modified":"2026-10-14T18:47:45","modified_gmt":"2026-10-14T17:47:45","slug":"css-einheiten-umrechner","status":"publish","type":"post","link":"https:\/\/wpcalc.com\/de\/einheitenrechner\/css-einheiten-umrechner\/","title":{"rendered":"CSS-Einheiten-Umrechner"},"content":{"rendered":"<section class=\"not-prose calculator-box\" aria-labelledby=\"calculator-title\"><div class=\"flex items-baseline sm:items-center justify-between gap-2 sm:gap-3\"><div class=\"flex flex-col sm:flex-row sm:items-center gap-2\"><span class=\"icon icon-calculator text-primary-700! text-base! dark:text-primary-300!\" aria-hidden=\"true\"><\/span><h2 id=\"calculator-title\" class=\"text-lg font-display font-bold\">Zwischen px, rem, em, vw und vh umrechnen<\/h2><\/div><div class=\"calcdash-favorite group\">\n  <button type=\"button\" class=\"favorite\" id=\"favorite\" data-favorite-id=\"4002\" data-favorite-title=\"CSS-Einheiten\" data-favorite-url=\"https:\/\/wpcalc.com\/de\/einheitenrechner\/css-einheiten-umrechner\/\" data-favorite-excerpt=\"Rechnen Sie eine CSS-L\u00e4nge zwischen px, rem, em, vw, vh, pt und Prozent um. Geben Sie den Wert ein, w\u00e4hlen Sie die Einheit, legen Sie die Schriftgr\u00f6\u00dfen des Root- und Elternelements sowie die Viewportma\u00dfe fest \u2013 und Sie erhalten alle Entsprechungen auf einen Blick.\" aria-label=\"Zu Favoriten hinzuf\u00fcgen\" data-favorite-icon=\"icon icon-other\">\n    <span class=\"icon icon-shape-star-empty\" aria-hidden=\"true\"><\/span>\n  <\/button>\n  <div class=\"calcdash-favorite__tip\" aria-hidden=\"true\">\n   <span class=\"favorite-tooltip\" id=\"favorite-tooltip\"><\/span>\n  <\/div>\n  <span class=\"sr-only\" role=\"status\" id=\"favorite-status\"><\/span>\n<\/div><\/div><form action=\"https:\/\/wpcalc.com\/de\/einheitenrechner\/css-einheiten-umrechner\/\" method=\"POST\" class=\"calculator\" id=\"calculator-4002\" data-post=\"4002\"><fieldset class=\"fieldset-input is-1\"><legend class=\"sr-only\">Eingabefelder<\/legend><div class=\"field has-term\" id=\"input-1\"><label for=\"field-1\">Wert<\/label><div class=\"term\">v<\/div>  <div class=\"absolute bottom-0 left-16 top-8 w-2 h-0.5 bg-blue-500\"><\/div><input type=\"number\" name=\"wert\" id=\"field-1\" aria-describedby=\"calc-info-1\" placeholder=\"e.g. 24\" step=\"any\" value=\"24\"\/><small id=\"calc-info-1\">Die L\u00e4nge, die umgerechnet werden soll. Negative Werte (z. B. bei negativen Au\u00dfenabst\u00e4nden) sind zul\u00e4ssig.<\/small><\/div><div class=\"field\" id=\"input-2\"><label for=\"field-2\">CSS-Einheit<\/label><div class=\"grid grid-cols-1\"><select id=\"field-2\" name=\"csseinheit\"><option value=\"px\" selected>px (Pixel)<\/option><option value=\"rem\">rem (Root-em)<\/option><option value=\"em\">em (relativ zur Schriftgr\u00f6\u00dfe des Elternelements)<\/option><option value=\"vw\">vw (Breite des Viewports)<\/option><option value=\"vh\">vh (H\u00f6he des Viewports)<\/option><option value=\"pt\">pt (Punkt)<\/option><option value=\"%\">% (Prozent der Schriftgr\u00f6\u00dfe des Elternelements)<\/option><\/select><svg class=\"pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-500 sm:size-4\" viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n              <path fill-rule=\"evenodd\" d=\"M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z\" clip-rule=\"evenodd\" \/>\n            <\/svg><\/div><\/div><div class=\"field has-term\" id=\"input-3\"><label for=\"field-3\">Root-Schriftgr\u00f6\u00dfe<\/label><div class=\"term\">rem<\/div>  <div class=\"absolute bottom-0 left-16 top-8 w-2 h-0.5 bg-blue-500\"><\/div><input type=\"text\" name=\"rootschriftgre\" id=\"field-3\" aria-describedby=\"calc-unit-3 calc-info-3\" data-number inputmode=\"decimal\" autocomplete=\"off\" spellcheck=\"false\" placeholder=\"e.g. 16\" min=\"0.1\" value=\"16\"\/><div class=\"unit\" id=\"calc-unit-3\">px<\/div><small id=\"calc-info-3\">Schriftgr\u00f6\u00dfe des &lt;html&gt;-Elements. Der Browser-Standard ist 16px; f\u00fcr rem erforderlich.<\/small><\/div><div class=\"field has-term\" id=\"input-4\"><label for=\"field-4\">Schriftgr\u00f6\u00dfe des Elternelements<\/label><div class=\"term\">em<\/div>  <div class=\"absolute bottom-0 left-16 top-8 w-2 h-0.5 bg-blue-500\"><\/div><input type=\"text\" name=\"schriftgre_des_elternelements\" id=\"field-4\" aria-describedby=\"calc-unit-4 calc-info-4\" data-number inputmode=\"decimal\" autocomplete=\"off\" spellcheck=\"false\" placeholder=\"e.g. 16\" min=\"0.1\" value=\"16\"\/><div class=\"unit\" id=\"calc-unit-4\">px<\/div><small id=\"calc-info-4\">Berechnete Schriftgr\u00f6\u00dfe des Elternelements; f\u00fcr em und % erforderlich.<\/small><\/div><div class=\"field has-term\" id=\"input-5\"><label for=\"field-5\">Viewport-Breite<\/label><div class=\"term\">vw<\/div>  <div class=\"absolute bottom-0 left-16 top-8 w-2 h-0.5 bg-blue-500\"><\/div><input type=\"text\" name=\"viewportbreite\" id=\"field-5\" aria-describedby=\"calc-unit-5 calc-info-5\" data-number inputmode=\"decimal\" autocomplete=\"off\" spellcheck=\"false\" placeholder=\"e.g. 1920\" min=\"1\" value=\"1920\"\/><div class=\"unit\" id=\"calc-unit-5\">px<\/div><small id=\"calc-info-5\">Breite des Browser-Viewports; f\u00fcr vw erforderlich.<\/small><\/div><div class=\"field has-term\" id=\"input-6\"><label for=\"field-6\">Viewport-H\u00f6he<\/label><div class=\"term\">vh<\/div>  <div class=\"absolute bottom-0 left-16 top-8 w-2 h-0.5 bg-blue-500\"><\/div><input type=\"text\" name=\"viewporthhe\" id=\"field-6\" aria-describedby=\"calc-unit-6 calc-info-6\" data-number inputmode=\"decimal\" autocomplete=\"off\" spellcheck=\"false\" placeholder=\"e.g. 1080\" min=\"1\" value=\"1080\"\/><div class=\"unit\" id=\"calc-unit-6\">px<\/div><small id=\"calc-info-6\">H\u00f6he des Browser-Viewports; f\u00fcr vh erforderlich.<\/small><\/div><\/fieldset><div class=\"buttons\"><button type=\"submit\" data-text=\"Neu berechnen\" id=\"calculate-button\" data-post=\"4002\">Berechnen<\/button><button type=\"reset\">Zur\u00fccksetzen<\/button><\/div><div class=\"field is-checkbox hidden!\" id=\"field-auto-calc\"><input type=\"checkbox\" id=\"auto-calc\"><label for=\"auto-calc\">Automatisch berechnen<\/label><small>Wenn aktiviert, wird das Ergebnis automatisch aktualisiert, sobald Sie einen Wert \u00e4ndern.<\/small><\/div><div class=\"fieldset-result is-hidden\" aria-labelledby=\"result-title\" aria-live=\"polite\" role=\"region\"> <h3 class=\"result-title bg-gradient-to-r from-primary-50 to-gray-50 dark:from-primary-900 dark:to-gray-800\" id=\"result-title\"><span class=\"icon icon-s-pulse\" aria-hidden=\"true\"><\/span> Umgerechnete Werte<\/h3><div class=\"result-box\"><div class=\"field-result\" id=\"output-1\"><span class=\"field-title\"><span>Pixel<\/span><span class=\"result-term\">px<\/span><\/span><span class=\"field-value\" id=\"result-1\" data-unit=\"px\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Ergebnis kopieren\" aria-label=\"Ergebnis kopieren\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result\" id=\"output-2\"><span class=\"field-title\"><span>Root-em<\/span><span class=\"result-term\">rem<\/span><\/span><span class=\"field-value\" id=\"result-2\" data-unit=\"rem\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Ergebnis kopieren\" aria-label=\"Ergebnis kopieren\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result\" id=\"output-3\"><span class=\"field-title\"><span>em (Elternelement)<\/span><span class=\"result-term\">em<\/span><\/span><span class=\"field-value\" id=\"result-3\" data-unit=\"em\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Ergebnis kopieren\" aria-label=\"Ergebnis kopieren\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result\" id=\"output-4\"><span class=\"field-title\"><span>Viewport-Breite (vw)<\/span><span class=\"result-term\">vw<\/span><\/span><span class=\"field-value\" id=\"result-4\" data-unit=\"vw\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Ergebnis kopieren\" aria-label=\"Ergebnis kopieren\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result\" id=\"output-5\"><span class=\"field-title\"><span>Viewport-H\u00f6he (vh)<\/span><span class=\"result-term\">vh<\/span><\/span><span class=\"field-value\" id=\"result-5\" data-unit=\"vh\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Ergebnis kopieren\" aria-label=\"Ergebnis kopieren\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result\" id=\"output-6\"><span class=\"field-title\"><span>Punkt (pt)<\/span><span class=\"result-term\">pt<\/span><\/span><span class=\"field-value\" id=\"result-6\" data-unit=\"pt\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Ergebnis kopieren\" aria-label=\"Ergebnis kopieren\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result is-column\" id=\"output-7\"><span class=\"field-title\"><span>Umrechnungsgrundlage<\/span><\/span><span class=\"field-value\" id=\"result-7\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Ergebnis kopieren\" aria-label=\"Ergebnis kopieren\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><\/div><div class=\"result-actions\"><button type=\"button\" class=\"copy-link\"><svg viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"\/><path d=\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"\/><\/svg><span class=\"copy-link__text\">Link zu dieser Berechnung kopieren<\/span><\/button><span class=\"sr-only\" role=\"status\" id=\"copy-link-status\"><\/span><\/div><\/div><a href=\"#respond\" class=\"hidden transition-opacity duration-300 opacity-0 w-50 text-sm justify-center items-center gap-2 px-4 py-2 rounded bg-gray-200 text-gray-700 hover:bg-gray-300\" id=\"leave-comment\"><span class=\"icon icon-comments\" aria-hidden=\"true\"><\/span>Kommentar schreiben<\/a><\/form><\/section><section id=\"calc-reactions\" class=\"not-prose hidden my-12 bg-gradient-to-r from-primary-50 to-gray-50 border border-indigo-100 rounded-xl px-6 py-4 shadow-sm\" data-post=\"4002\" aria-live=\"polite\" aria-labelledby=\"calc-reactions-title\"><p id=\"calc-reactions-title\" class=\"text-sm text-gray-500 text-center mb-2\">Wie finden Sie dieses Ergebnis?<\/p><div role=\"group\" aria-labelledby=\"calc-reactions-title\" class=\"grid grid-cols-3 sm:flex sm:flex-row sm:justify-around gap-4 sm:items-center sm:flex-wrap\"><button type=\"button\" aria-pressed=\"false\" class=\"reaction-btn flex flex-col items-center gap-1 text-sm text-gray-700 hover:text-primary-600 cursor-pointer transition-transform hover:scale-105\" data-reaction=\"like\"><span class=\"reaction-count\" data-reaction-count=\"like\">0<\/span><span class=\"reaction text-3xl\" aria-hidden=\"true\">\ud83d\ude00 <\/span><span class=\"reaction-description font-medium\">Gef\u00e4llt mir <\/span><\/button><button type=\"button\" aria-pressed=\"false\" class=\"reaction-btn flex flex-col items-center gap-1 text-sm text-gray-700 hover:text-primary-600 cursor-pointer transition-transform hover:scale-105\" data-reaction=\"helpful\"><span class=\"reaction-count\" data-reaction-count=\"helpful\">0<\/span><span class=\"reaction text-3xl\" aria-hidden=\"true\">\ud83d\udca1 <\/span><span class=\"reaction-description font-medium\">Hilfreich <\/span><\/button><button type=\"button\" aria-pressed=\"false\" class=\"reaction-btn flex flex-col items-center gap-1 text-sm text-gray-700 hover:text-primary-600 cursor-pointer transition-transform hover:scale-105\" data-reaction=\"confused\"><span class=\"reaction-count\" data-reaction-count=\"confused\">0<\/span><span class=\"reaction text-3xl\" aria-hidden=\"true\">\ud83d\ude15 <\/span><span class=\"reaction-description font-medium\">Verwirrt <\/span><\/button><button type=\"button\" aria-pressed=\"false\" class=\"reaction-btn flex flex-col items-center gap-1 text-sm text-gray-700 hover:text-primary-600 cursor-pointer transition-transform hover:scale-105\" data-reaction=\"disappointed\"><span class=\"reaction-count\" data-reaction-count=\"disappointed\">0<\/span><span class=\"reaction text-3xl\" aria-hidden=\"true\">\ud83d\ude1e <\/span><span class=\"reaction-description font-medium\">Entt\u00e4uscht <\/span><\/button><button type=\"button\" aria-pressed=\"false\" class=\"reaction-btn flex flex-col items-center gap-1 text-sm text-gray-700 hover:text-primary-600 cursor-pointer transition-transform hover:scale-105\" data-reaction=\"inaccurate\"><span class=\"reaction-count\" data-reaction-count=\"inaccurate\">0<\/span><span class=\"reaction text-3xl\" aria-hidden=\"true\">\u274c <\/span><span class=\"reaction-description font-medium\">Ungenau <\/span><\/button><\/div><div id=\"reaction-message\" class=\"hidden mt-8 rounded-md border border-primary-100 bg-white\/50 backdrop-blur-sm px-4 py-2 text-sm text-center shadow-sm\"><\/div><\/section><div class=\"calcdash-ad not-prose calcdash-ad--calc_result calcdash-ad--in-article\"><ins class=\"adsbygoogle\" style=\"display:block\" data-ad-client=\"ca-pub-1721569815777345\" data-ad-slot=\"6317458308\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\"><\/ins><script>(adsbygoogle = window.adsbygoogle || []).push({});<\/script><\/div>\n<style id=\"wpcoderpro-inline-1\">.formula-box {\r\n\tborder-bottom: none !important;\r\n}<\/style><section class=\"formula-box\" aria-labelledby=\"formula-title\">\r\n\t<div id=\"formula-title\" class=\"not-prose font-display mb-4\"><span class=\"icon icon-formula\" aria-hidden=\"true\"><\/span><h2>Formel f\u00fcr CSS-Einheiten<\/h2><\/div>\r\n\t<figure class=\"not-prose formula\">\r\n\t\t<figcaption class=\"formula-title\">Formel<\/figcaption>\r\n\t\t<div class=\"text-base text-gray-800\" id=\"formula\">\n\\[ px = v \\times f(\\text{Einheit}) \\]\n\\[ x_{\\text{Ziel}} = \\frac{px}{f(\\text{Zieleinheit})} \\]\n<\/div>\r\n\t<\/figure>\r\n\t<\/p>\n<p><strong>Dabei ist:<\/strong><\/p>\n<ul>\n<li>\\(v\\) \u2014 die eingegebene L\u00e4nge in ihrer urspr\u00fcnglichen Einheit<\/li>\n<li>\\(f(\\text{Einheit})\\) \u2014 der Pixelwert einer Einheit dieses Typs:<\/li>\n<li>\\(px\\): 1 &nbsp;\\(rem\\): Root-Schriftgr\u00f6\u00dfe &nbsp;\\(em\\): Schriftgr\u00f6\u00dfe des Elternelements &nbsp;\\(vw\\): Viewportbreite \\(\/ 100\\) &nbsp;\\(vh\\): Viewporth\u00f6he \\(\/ 100\\) &nbsp;\\(pt\\): \\(96\/72 = 1{,}3333\\) &nbsp;\\(%\\): Schriftgr\u00f6\u00dfe des Elternelements \\(\/ 100\\)<\/li>\n<\/ul>\n<p>Der Rechner wandelt den eingegebenen Wert zun\u00e4chst in Pixel um und teilt ihn anschlie\u00dfend durch den Pixelfaktor jeder Zieleinheit. Dank dieses zweistufigen Vorgehens stimmen alle sieben Ergebnisse garantiert untereinander \u00fcberein.<\/p>\n<p>\r\n<\/section>\n<style id=\"wpcoderpro-inline-2\">.calculation-box {\r\n\tborder-bottom: none !important;\r\n}<\/style><section id=\"calculation\" class=\"calculation-box\" aria-labelledby=\"calculation-title\">\r\n\t<div id=\"calculation-title\" class=\"not-prose font-display\"><span class=\"icon icon-unordered-list\" aria-hidden=\"true\"><\/span><h2>CSS-Einheiten \u2013 Rechenbeispiel<\/h2><\/div>\r\n\r\n<\/p>\n<p><strong>Beispiel:<\/strong> Umrechnung von <code>24px<\/code> in rem, em, vw, vh und pt bei einer Root- und Eltern-Schriftgr\u00f6\u00dfe von 16px und einem Viewport von 1920\u00d71080 (die Standardeinstellungen des Rechners).<\/p>\n<p>\\[ px = 24 \\times 1 = 24 \\]<\/p>\n<p>\\[ rem = \\frac{24}{16} = 1.5 \\quad em = \\frac{24}{16} = 1.5 \\]<\/p>\n<p>\\[ vw = \\frac{24}{1920\/100} = \\frac{24}{19.2} = 1.25 \\quad vh = \\frac{24}{1080\/100} \\approx 2.2222 \\]<\/p>\n<p>\\[ pt = 24 \\times \\frac{72}{96} = 18 \\]<\/p>\n<p><strong>Ergebnis:<\/strong> 24px = 1,5rem = 1,5em = 1,25vw = 2,2222vh = 18pt.<\/p>\n<p>\n\r\n<\/section>\n<h2>So benutzen Sie den CSS-Einheiten-Umrechner<\/h2>\n<ol>\n<li>Geben Sie die L\u00e4nge in das Feld <strong>Wert<\/strong> ein, zum Beispiel 24. Negative Werte sind ebenfalls m\u00f6glich \u2013 praktisch f\u00fcr negative Abst\u00e4nde.<\/li>\n<li>W\u00e4hlen Sie im Dropdown <strong>CSS-Einheit<\/strong> die Einheit dieses Wertes (px, rem, em, vw, vh, pt oder %).<\/li>\n<li>Legen Sie die <strong>Root-Schriftgr\u00f6\u00dfe<\/strong> fest \u2013 die Schriftgr\u00f6\u00dfe des <code>&lt;html&gt;<\/code>-Elements. Browser verwenden standardm\u00e4\u00dfig 16px.<\/li>\n<li>Legen Sie die <strong>Eltern-Schriftgr\u00f6\u00dfe<\/strong> fest \u2013 die berechnete Schriftgr\u00f6\u00dfe des Elternelements, die f\u00fcr die Umrechnung von em und % ben\u00f6tigt wird.<\/li>\n<li>Geben Sie <strong>Viewportbreite<\/strong> und <strong>Viewporth\u00f6he<\/strong> des Browserfensters in Pixeln ein; davon h\u00e4ngen die Ergebnisse f\u00fcr vw und vh ab.<\/li>\n<li>Lesen Sie alle Entsprechungen auf einen Blick unter <strong>Umgerechnete Werte<\/strong> ab \u2013 zusammen mit der Umrechnungsgrundlage, die zeigt, wie viel Pixel jede Einheit in Ihrer Konfiguration betr\u00e4gt.<\/li>\n<\/ol>\n<h2>Was sind CSS-Einheiten und warum sind sie wichtig?<\/h2>\n<p>CSS-L\u00e4ngen geh\u00f6ren zu zwei Familien. <em>Absolute<\/em> Einheiten wie px und pt haben eine feste Gr\u00f6\u00dfe: Die CSS-Spezifikation definiert das Referenzpixel so, dass 1in = 96px = 72pt gilt. <em>Relative<\/em> Einheiten h\u00e4ngen vom Kontext ab: rem bezieht sich auf die Schriftgr\u00f6\u00dfe des Root-Elements, em auf die Schriftgr\u00f6\u00dfe des Elternelements, vw und vh auf 1% der Viewportbreite bzw. -h\u00f6he, und % (bei font-size) auf die Schriftgr\u00f6\u00dfe des Elternelements.<\/p>\n<p>Die Wahl der Einheit bestimmt, wie sich ein Layout verh\u00e4lt. Werte in px bleiben unabh\u00e4ngig von Benutzereinstellungen konstant \u2013 das macht sie berechenbar f\u00fcr Rahmen und feine Details, aber starr f\u00fcr Typografie. Werte in rem skalieren mit der Root-Schriftgr\u00f6\u00dfe: Vergr\u00f6\u00dfert ein Nutzer die Basisschrift im Browser, w\u00e4chst alles, was in rem angegeben ist, proportional mit \u2013 eine zentrale Voraussetzung f\u00fcr Barrierefreiheit. Werte in em addieren sich in verschachtelten Elementen auf, was in tiefen Markup-Strukturen zu \u00fcberraschenden Ergebnissen f\u00fchren kann.<\/p>\n<p>Viewport-Einheiten sorgen daf\u00fcr, dass Typografie und Abst\u00e4nde auf die Fenstergr\u00f6\u00dfe reagieren. Eine Breite von <code>50vw<\/code> f\u00fcllt stets die halbe Bildschirmbreite aus \u2013 deshalb kombinieren Hero-Bereiche und fluide Typografie vw oft mit rem mithilfe von <code>clamp()<\/code>. Da sich vw und vh mit jeder Gr\u00f6\u00dfen\u00e4nderung des Fensters \u00e4ndern, ist ihre Umrechnung in px nur f\u00fcr eine konkrete Viewportgr\u00f6\u00dfe aussagekr\u00e4ftig \u2013 genau die, die Sie im Rechner eingeben.<\/p>\n<p>Die Ergebnisse sind leicht zu deuten: Jeder Wert ist dieselbe physische L\u00e4nge, nur in einer anderen Einheit ausgedr\u00fcckt. Wer ein Design-System von px auf rem umstellt, findet in der Spalte rem den Token-Wert, den er notieren muss; wer mit Design-Tools arbeitet, die Punkte verwenden, oder Druckerzeugnisse vergleicht, erh\u00e4lt in der Spalte pt die direkte Entsprechung.<\/p>\n<h2>Annahmen, Grenzen und praktische Hinweise<\/h2>\n<ul>\n<li>Der Umrechner geht vom Standard-Referenzpixel der CSS-Spezifikation aus: <code>1in = 96px = 72pt<\/code>. Bei der physischen (Druck-)Ausgabe k\u00f6nnen je nach Ger\u00e4t geringe Abweichungen entstehen.<\/li>\n<li>Prozent wird als relativ zur Schriftgr\u00f6\u00dfe des Elternelements behandelt \u2013 das ist f\u00fcr <code>font-size<\/code> korrekt. Bei <code>width<\/code>, <code>height<\/code>, <code>margin<\/code> und <code>padding<\/code> bezieht sich Prozent dagegen auf die Ma\u00dfe des Elternelements; in diesen F\u00e4llen ist ein anderer Referenzwert n\u00f6tig.<\/li>\n<li>em ist relativ zur Schriftgr\u00f6\u00dfe des <em>Elternelements<\/em>. Innerhalb von Eigenschaften wie <code>line-height<\/code> oder <code>padding<\/code> auf dem Element selbst bezieht sich em dagegen auf die eigene Schriftgr\u00f6\u00dfe dieses Elements \u2013 passen Sie das Feld \u201eEltern-Schriftgr\u00f6\u00dfe\u201c entsprechend an.<\/li>\n<li>Die Ergebnisse f\u00fcr vw und vh gelten nur f\u00fcr die von Ihnen eingegebenen Viewportma\u00dfe. Probieren Sie mehrere Gr\u00f6\u00dfen aus (z. B. 1920\u00d71080, 1366\u00d7768, 390\u00d7844), um zu sehen, wie sich die umgerechneten Werte verschieben.<\/li>\n<li>Browser wenden in manchen Konfigurationen eine minimale Schriftgr\u00f6\u00dfe an, wodurch sehr kleiner Text in rem oder em gr\u00f6\u00dfer dargestellt werden kann, als die Rechnung ergibt.<\/li>\n<li>Eine praktische Faustregel: Bei der Standard-Root-Schriftgr\u00f6\u00dfe von 16px gilt 1rem = 16px, also <em>px \u00f7 16 = rem<\/em>. Setzen Sie den Root auf 10px, entsprechen die rem-Werte exakt px \u00f7 10 \u2013 deshalb arbeiten viele Design-Systeme mit einem 10px-Root.<\/li>\n<\/ul>\n<p>Wenn Sie au\u00dferdem zwischen Mess- oder Technik-Einheiten umrechnen m\u00f6chten, probieren Sie unseren <a href=\"https:\/\/wpcalc.com\/en\/converters\/power-unit-converter\/\">Leistungs-Umrechner<\/a>, den <a href=\"https:\/\/wpcalc.com\/de\/einheitenrechner\/datenuebertragungsrate-umrechner-mbps-in-mb-s\/\">Daten\u00fcbertragungsrate-Umrechner<\/a> oder den allgemeinen <a href=\"https:\/\/wpcalc.com\/de\/einheitenrechner\/geschwindigkeit-umrechnen\/\">Geschwindigkeits-Umrechner<\/a> aus.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Rechnen Sie eine CSS-L\u00e4nge zwischen px, rem, em, vw, vh, pt und Prozent um. Geben Sie den Wert ein, w\u00e4hlen Sie die Einheit, legen Sie die Schriftgr\u00f6\u00dfen des Root- und Elternelements sowie die Viewportma\u00dfe fest \u2013 und Sie erhalten alle Entsprechungen auf einen Blick.<\/p>\n","protected":false},"author":3168,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[4],"tags":[59],"class_list":["post-4002","post","type-post","status-publish","format-standard","hentry","category-einheitenrechner","tag-andere-einheiten"],"acf":[],"_links":{"self":[{"href":"https:\/\/wpcalc.com\/de\/wp-json\/wp\/v2\/posts\/4002","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpcalc.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpcalc.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpcalc.com\/de\/wp-json\/wp\/v2\/users\/3168"}],"replies":[{"embeddable":true,"href":"https:\/\/wpcalc.com\/de\/wp-json\/wp\/v2\/comments?post=4002"}],"version-history":[{"count":1,"href":"https:\/\/wpcalc.com\/de\/wp-json\/wp\/v2\/posts\/4002\/revisions"}],"predecessor-version":[{"id":4484,"href":"https:\/\/wpcalc.com\/de\/wp-json\/wp\/v2\/posts\/4002\/revisions\/4484"}],"wp:attachment":[{"href":"https:\/\/wpcalc.com\/de\/wp-json\/wp\/v2\/media?parent=4002"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpcalc.com\/de\/wp-json\/wp\/v2\/categories?post=4002"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpcalc.com\/de\/wp-json\/wp\/v2\/tags?post=4002"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}