{"id":2560,"date":"2026-10-14T18:50:01","date_gmt":"2026-10-14T17:50:01","guid":{"rendered":"https:\/\/wpcalc.com\/pl\/konwertery\/konwerter-jednostek-css\/"},"modified":"2026-10-14T18:50:01","modified_gmt":"2026-10-14T17:50:01","slug":"konwerter-jednostek-css","status":"publish","type":"post","link":"https:\/\/wpcalc.com\/pl\/konwertery\/konwerter-jednostek-css\/","title":{"rendered":"Konwerter jednostek CSS"},"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\">Przeliczanie mi\u0119dzy px, rem, em, vw i vh<\/h2><\/div><div class=\"calcdash-favorite group\">\n  <button type=\"button\" class=\"favorite\" id=\"favorite\" data-favorite-id=\"2560\" data-favorite-title=\"Jednostki CSS\" data-favorite-url=\"https:\/\/wpcalc.com\/pl\/konwertery\/konwerter-jednostek-css\/\" data-favorite-excerpt=\"Przelicz d\u0142ugo\u015b\u0107 CSS mi\u0119dzy px, rem, em, vw, vh, pt i procentami. Wpisz warto\u015b\u0107, wybierz jej jednostk\u0119, ustaw rozmiar czcionki elementu g\u0142\u00f3wnego i nadrz\u0119dnego oraz wymiary viewportu \u2014 i od razu otrzymaj wszystkie przeliczone warto\u015bci.\" aria-label=\"Dodaj do ulubionych\" 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\/pl\/konwertery\/konwerter-jednostek-css\/\" method=\"POST\" class=\"calculator\" id=\"calculator-2560\" data-post=\"2560\"><fieldset class=\"fieldset-input is-1\"><legend class=\"sr-only\">Pola danych<\/legend><div class=\"field has-term\" id=\"input-1\"><label for=\"field-1\">Warto\u015b\u0107<\/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=\"warto\" id=\"field-1\" aria-describedby=\"calc-info-1\" placeholder=\"e.g. 24\" step=\"any\" value=\"24\"\/><small id=\"calc-info-1\">D\u0142ugo\u015b\u0107, kt\u00f3r\u0105 chcesz przeliczy\u0107. Dozwolone s\u0105 warto\u015bci ujemne (np. ujemne marginesy).<\/small><\/div><div class=\"field\" id=\"input-2\"><label for=\"field-2\">Jednostka CSS<\/label><div class=\"grid grid-cols-1\"><select id=\"field-2\" name=\"jednostka_css\"><option value=\"px\" selected>px (piksele)<\/option><option value=\"rem\">rem (em elementu g\u0142\u00f3wnego)<\/option><option value=\"em\">em (wzgl\u0119dem rozmiaru czcionki rodzica)<\/option><option value=\"vw\">vw (szeroko\u015b\u0107 viewportu)<\/option><option value=\"vh\">vh (wysoko\u015b\u0107 viewportu)<\/option><option value=\"pt\">pt (punkty)<\/option><option value=\"%\">% (procent rozmiaru czcionki rodzica)<\/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\">Rozmiar czcionki g\u0142\u00f3wnej<\/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=\"rozmiar_czcionki_gwnej\" 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\">Rozmiar czcionki elementu &lt;html&gt;. Domy\u015blnie przegl\u0105darki przyjmuj\u0105 16 px; potrzebny do przeliczania rem.<\/small><\/div><div class=\"field has-term\" id=\"input-4\"><label for=\"field-4\">Rozmiar czcionki rodzica<\/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=\"rozmiar_czcionki_rodzica\" 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\">Wyliczony rozmiar czcionki elementu nadrz\u0119dnego; potrzebny do przeliczania em i %.<\/small><\/div><div class=\"field has-term\" id=\"input-5\"><label for=\"field-5\">Szeroko\u015b\u0107 viewportu<\/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=\"szeroko_viewportu\" 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\">Szeroko\u015b\u0107 viewportu przegl\u0105darki; potrzebna do przeliczania vw.<\/small><\/div><div class=\"field has-term\" id=\"input-6\"><label for=\"field-6\">Wysoko\u015b\u0107 viewportu<\/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=\"wysoko_viewportu\" 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\">Wysoko\u015b\u0107 viewportu przegl\u0105darki; potrzebna do przeliczania vh.<\/small><\/div><\/fieldset><div class=\"buttons\"><button type=\"submit\" data-text=\"Przelicz ponownie\" id=\"calculate-button\" data-post=\"2560\">Oblicz<\/button><button type=\"reset\">Wyczy\u015b\u0107<\/button><\/div><div class=\"field is-checkbox hidden!\" id=\"field-auto-calc\"><input type=\"checkbox\" id=\"auto-calc\"><label for=\"auto-calc\">Obliczaj automatycznie<\/label><small>Po w\u0142\u0105czeniu wynik aktualizuje si\u0119 automatycznie po zmianie dowolnej warto\u015bci.<\/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> Przeliczone warto\u015bci<\/h3><div class=\"result-box\"><div class=\"field-result\" id=\"output-1\"><span class=\"field-title\"><span>Piksele<\/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=\"Kopiuj wynik\" aria-label=\"Kopiuj wynik\"><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>Jednostki rem<\/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=\"Kopiuj wynik\" aria-label=\"Kopiuj wynik\"><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>Jednostki em (rodzic)<\/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=\"Kopiuj wynik\" aria-label=\"Kopiuj wynik\"><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>Jednostki szeroko\u015bci viewportu<\/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=\"Kopiuj wynik\" aria-label=\"Kopiuj wynik\"><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>Jednostki wysoko\u015bci viewportu<\/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=\"Kopiuj wynik\" aria-label=\"Kopiuj wynik\"><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>Punkty<\/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=\"Kopiuj wynik\" aria-label=\"Kopiuj wynik\"><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>Podstawa przelicze\u0144<\/span><\/span><span class=\"field-value\" id=\"result-7\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Kopiuj wynik\" aria-label=\"Kopiuj wynik\"><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\">Kopiuj link do tego obliczenia<\/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>Zostaw komentarz<\/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=\"2560\" aria-live=\"polite\" aria-labelledby=\"calc-reactions-title\"><p id=\"calc-reactions-title\" class=\"text-sm text-gray-500 text-center mb-2\">Jak oceniasz ten wynik?<\/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\">Lubi\u0119 to <\/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\">Pomocne <\/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\">Niejasne <\/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\">Rozczarowanie <\/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\">Niedok\u0142adne <\/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>Wz\u00f3r przeliczania jednostek CSS<\/h2><\/div>\r\n\t<figure class=\"not-prose formula\">\r\n\t\t<figcaption class=\"formula-title\">Wz\u00f3r<\/figcaption>\r\n\t\t<div class=\"text-base text-gray-800\" id=\"formula\">\n\\[ px = v \\times f(\\text{jednostka}) \\]\n\\[ x_{\\text{docelowa}} = \\frac{px}{f(\\text{jednostka docelowa})} \\]\n<\/div>\r\n\t<\/figure>\r\n\t<\/p>\n<p><strong>Oznaczenia:<\/strong><\/p>\n<ul>\n<li>\\(v\\) \u2014 wpisana d\u0142ugo\u015b\u0107 w jej pierwotnej jednostce<\/li>\n<li>\\(f(\\text{jednostka})\\) \u2014 ile pikseli odpowiada jednej jednostce danego typu:<\/li>\n<li>\\(px\\): 1 &nbsp;\\(rem\\): rozmiar czcionki g\u0142\u00f3wnego elementu (root) &nbsp;\\(em\\): rozmiar czcionki elementu nadrz\u0119dnego &nbsp;\\(vw\\): szeroko\u015b\u0107 viewportu \\(\/ 100\\) &nbsp;\\(vh\\): wysoko\u015b\u0107 viewportu \\(\/ 100\\) &nbsp;\\(pt\\): \\(96\/72 = 1.3333\\) &nbsp;\\(%\\): rozmiar czcionki elementu nadrz\u0119dnego \\(\/ 100\\)<\/li>\n<\/ul>\n<p>Kalkulator najpierw przelicza wprowadzon\u0105 warto\u015b\u0107 na piksele, a potem dzieli j\u0105 przez liczb\u0119 pikseli przypadaj\u0105c\u0105 na ka\u017cd\u0105 jednostk\u0119 docelow\u0105. Dzi\u0119ki temu dwuetapowemu podej\u015bciu wszystkie siedem wynik\u00f3w jest ze sob\u0105 zgodne.<\/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>Jednostki CSS \u2014 przyk\u0142ad oblicze\u0144<\/h2><\/div>\r\n\r\n<\/p>\n<p><strong>Przyk\u0142ad:<\/strong> przelicz <code>24px<\/code> na rem, em, vw, vh i pt przy rozmiarze czcionki elementu g\u0142\u00f3wnego i nadrz\u0119dnego r\u00f3wnym 16px oraz viewporcie 1920\u00d71080 (warto\u015bci domy\u015blne kalkulatora).<\/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>Wynik:<\/strong> 24px = 1,5rem = 1,5em = 1,25vw = 2,2222vh = 18pt.<\/p>\n<p>\n\r\n<\/section>\n<h2>Jak korzysta\u0107 z konwertera jednostek CSS<\/h2>\n<ol>\n<li>Wpisz d\u0142ugo\u015b\u0107 w polu <strong>Warto\u015b\u0107<\/strong> \u2014 na przyk\u0142ad 24. Dzia\u0142aj\u0105 te\u017c warto\u015bci ujemne, co przydaje si\u0119 przy ujemnych marginesach.<\/li>\n<li>Wybierz jednostk\u0119 tej warto\u015bci z listy rozwijanej <strong>Jednostka CSS<\/strong> (px, rem, em, vw, vh, pt lub %).<\/li>\n<li>Ustaw <strong>rozmiar czcionki g\u0142\u00f3wnego elementu<\/strong>, czyli rozmiar czcionki elementu <code>&lt;html&gt;<\/code>. Przegl\u0105darki domy\u015blnie przyjmuj\u0105 16px.<\/li>\n<li>Ustaw <strong>rozmiar czcionki elementu nadrz\u0119dnego<\/strong> \u2014 obliczony rozmiar czcionki elementu nadrz\u0119dnego, potrzebny do przelicze\u0144 na em i %.<\/li>\n<li>Wpisz <strong>szeroko\u015b\u0107<\/strong> i <strong>wysoko\u015b\u0107 viewportu<\/strong> okna przegl\u0105darki w pikselach; od nich zale\u017c\u0105 wyniki dla vw i vh.<\/li>\n<li>Odczytaj wszystkie przeliczone warto\u015bci naraz w sekcji <strong>Przeliczone warto\u015bci<\/strong>, wraz z podstaw\u0105 przeliczenia pokazuj\u0105c\u0105, ile pikseli odpowiada ka\u017cdej jednostce w Twoich ustawieniach.<\/li>\n<\/ol>\n<h2>Czym s\u0105 jednostki CSS i dlaczego maj\u0105 znaczenie?<\/h2>\n<p>D\u0142ugo\u015bci w CSS dziel\u0105 si\u0119 na dwie rodziny. Jednostki <em>bezwzgl\u0119dne<\/em>, takie jak px i pt, maj\u0105 sta\u0142y rozmiar: specyfikacja CSS definiuje piksel odniesienia tak, \u017ce 1in = 96px = 72pt. Jednostki <em>wzgl\u0119dne<\/em> zale\u017c\u0105 od kontekstu: rem odnosi si\u0119 do rozmiaru czcionki elementu g\u0142\u00f3wnego, em do rozmiaru czcionki elementu nadrz\u0119dnego, vw i vh do 1% szeroko\u015bci albo wysoko\u015bci viewportu, a % (dla font-size) do rozmiaru czcionki elementu nadrz\u0119dnego.<\/p>\n<p>Wyb\u00f3r jednostki decyduje o zachowaniu uk\u0142adu strony. Warto\u015bci w px pozostaj\u0105 sta\u0142e niezale\u017cnie od preferencji u\u017cytkownika, co czyni je przewidywalnymi dla obramowa\u0144 i drobnych detali, ale sztywnymi dla typografii. Warto\u015bci w rem skaluj\u0105 si\u0119 wraz z rozmiarem czcionki g\u0142\u00f3wnego elementu, wi\u0119c gdy u\u017cytkownik powi\u0119kszy podstawowy rozmiar tekstu w przegl\u0105darce, wszystko rozmiarowane w rem proporcjonalnie uro\u015bnie \u2014 to kluczowy wym\u00f3g dost\u0119pno\u015bci. Warto\u015bci w em kumuluj\u0105 si\u0119 w zagnie\u017cd\u017conych elementach, co przy g\u0142\u0119bokim zagnie\u017cd\u017ceniu mo\u017ce dawa\u0107 zaskakuj\u0105ce wyniki.<\/p>\n<p>Jednostki viewportu sprawiaj\u0105, \u017ce typografia i odst\u0119py reaguj\u0105 na rozmiar okna. Szeroko\u015b\u0107 ustawiona na <code>50vw<\/code> zawsze wype\u0142nia po\u0142ow\u0119 ekranu, dlatego sekcje hero i p\u0142ynna typografia cz\u0119sto \u0142\u0105cz\u0105 vw z rem za pomoc\u0105 <code>clamp()<\/code>. Poniewa\u017c vw i vh zmieniaj\u0105 si\u0119 przy ka\u017cdej zmianie rozmiaru okna, przeliczanie ich na px ma sens tylko dla jednego konkretnego rozmiaru viewportu \u2014 tego, kt\u00f3ry wpisujesz w kalkulatorze.<\/p>\n<p>Interpretacja wynik\u00f3w jest prosta: ka\u017cdy z nich to ta sama d\u0142ugo\u015b\u0107 fizyczna wyra\u017cona w innej jednostce. Je\u015bli migrujesz system projektowy z px na rem, kolumna rem podpowiada warto\u015b\u0107 tokena do wpisania; je\u015bli drukujesz albo por\u00f3wnujesz wyniki z narz\u0119dziami projektowymi pracuj\u0105cymi na punktach, kolumna pt daje bezpo\u015bredni odpowiednik.<\/p>\n<h2>Za\u0142o\u017cenia, ograniczenia i praktyczne wskaz\u00f3wki<\/h2>\n<ul>\n<li>Konwerter zak\u0142ada standardowy piksel odniesienia CSS: <code>1in = 96px = 72pt<\/code>. Fizyczny (drukowany) wynik mo\u017ce si\u0119 nieznacznie r\u00f3\u017cni\u0107 w zale\u017cno\u015bci od urz\u0105dzenia.<\/li>\n<li>Procent traktowany jest jako wzgl\u0119dny wobec rozmiaru czcionki elementu nadrz\u0119dnego, co jest poprawne dla <code>font-size<\/code>. Dla <code>width<\/code>, <code>height<\/code>, <code>margin<\/code> i <code>padding<\/code> procent odnosi si\u0119 natomiast do wymiar\u00f3w elementu nadrz\u0119dnego, wi\u0119c w tych przypadkach potrzebna jest inna warto\u015b\u0107 odniesienia.<\/li>\n<li>em odnosi si\u0119 do rozmiaru czcionki elementu <em>nadrz\u0119dnego<\/em>. Gdy jest u\u017cywany we w\u0142a\u015bciwo\u015bciach samego elementu, np. w <code>line-height<\/code> czy <code>padding<\/code>, em odnosi si\u0119 do rozmiaru czcionki tego elementu \u2014 odpowiednio dostosuj pole z rozmiarem czcionki elementu nadrz\u0119dnego.<\/li>\n<li>Wyniki dla vw i vh s\u0105 wa\u017cne wy\u0142\u0105cznie dla wymiar\u00f3w viewportu, kt\u00f3re wpiszesz. Przetestuj kilka rozmiar\u00f3w (np. 1920\u00d71080, 1366\u00d7768, 390\u00d7844), aby zobaczy\u0107, jak przeliczone warto\u015bci si\u0119 zmieniaj\u0105.<\/li>\n<li>Przegl\u0105darki w niekt\u00f3rych konfiguracjach stosuj\u0105 minimalny rozmiar czcionki, przez co bardzo ma\u0142y tekst oparty na rem lub em mo\u017ce renderowa\u0107 si\u0119 wi\u0119kszy, ni\u017c wynika z oblicze\u0144.<\/li>\n<li>Przydatna regu\u0142a kciuka: przy domy\u015blnym rozmiarze czcionki g\u0142\u00f3wnej 16px mamy 1rem = 16px, wi\u0119c <em>px \u00f7 16 = rem<\/em>. Je\u015bli ustawisz root na 10px, warto\u015bci rem b\u0119d\u0105 odpowiada\u0107 px \u00f7 10 \u2014 dlatego wiele system\u00f3w projektowych ustawia rozmiar czcionki g\u0142\u00f3wnego elementu na 10px.<\/li>\n<\/ul>\n<p>Je\u015bli potrzebujesz te\u017c przelicza\u0107 jednostki miar lub in\u017cynierskie, wypr\u00f3buj nasz <a href=\"https:\/\/wpcalc.com\/en\/converters\/power-unit-converter\/\">Konwerter jednostek mocy<\/a>, <a href=\"https:\/\/wpcalc.com\/pl\/konwertery\/przelicznik-predkosci-transferu-danych-mbps-na-mb-s\/\">Konwerter szybko\u015bci transmisji danych<\/a> albo og\u00f3lny <a href=\"https:\/\/wpcalc.com\/pl\/konwertery\/przelicznik-jednostek-predkosci\/\">Konwerter jednostek pr\u0119dko\u015bci<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Przelicz d\u0142ugo\u015b\u0107 CSS mi\u0119dzy px, rem, em, vw, vh, pt i procentami. Wpisz warto\u015b\u0107, wybierz jej jednostk\u0119, ustaw rozmiar czcionki elementu g\u0142\u00f3wnego i nadrz\u0119dnego oraz wymiary viewportu \u2014 i od razu otrzymaj wszystkie przeliczone warto\u015bci.<\/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":[2],"tags":[58],"class_list":["post-2560","post","type-post","status-publish","format-standard","hentry","category-konwertery","tag-inne-jednostki"],"acf":[],"_links":{"self":[{"href":"https:\/\/wpcalc.com\/pl\/wp-json\/wp\/v2\/posts\/2560","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpcalc.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpcalc.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpcalc.com\/pl\/wp-json\/wp\/v2\/users\/3168"}],"replies":[{"embeddable":true,"href":"https:\/\/wpcalc.com\/pl\/wp-json\/wp\/v2\/comments?post=2560"}],"version-history":[{"count":1,"href":"https:\/\/wpcalc.com\/pl\/wp-json\/wp\/v2\/posts\/2560\/revisions"}],"predecessor-version":[{"id":2866,"href":"https:\/\/wpcalc.com\/pl\/wp-json\/wp\/v2\/posts\/2560\/revisions\/2866"}],"wp:attachment":[{"href":"https:\/\/wpcalc.com\/pl\/wp-json\/wp\/v2\/media?parent=2560"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpcalc.com\/pl\/wp-json\/wp\/v2\/categories?post=2560"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpcalc.com\/pl\/wp-json\/wp\/v2\/tags?post=2560"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}