Konwerter jednostek PX, REM i EM: Kluczowe jednostki CSS wyjaśnione

Wprowadzenie do konwersji jednostek CSS

Zrozumienie i konwersja jednostek CSS jest niezbędne dla responsywnego projektowania i rozwoju stron internetowych. Jednostki PX (piksel), REM (root em) i EM są podstawowymi elementami, które określają, jak elementy są rozmiarowane i pozycjonowane na różnych urządzeniach i rozmiarach ekranów. To kompleksowe narzędzie do konwersji jednostek umożliwia łatwe tłumaczenie wartości między tymi trzema kluczowymi jednostkami CSS, pomagając w tworzeniu bardziej elastycznych i łatwych w utrzymaniu układów stron.

Piksele (PX) to jednostki o stałej wielkości, które zapewniają precyzyjną kontrolę, ale brakuje im skalowalności, podczas gdy jednostki REM skalują się w odniesieniu do rozmiaru czcionki elementu głównego, a jednostki EM skalują się w odniesieniu do rozmiaru czcionki ich elementu nadrzędnego. Konwersja między tymi jednostkami może być trudna, szczególnie podczas pracy z złożonymi projektami lub przy wsparciu funkcji dostępności, takich jak zmiana rozmiaru tekstu. Nasz konwerter PX, REM i EM upraszcza ten proces, pozwalając skupić się na tworzeniu pięknych, responsywnych projektów.

Zrozumienie jednostek CSS: PX, REM i EM

Czym są piksele (PX)?

Piksele (PX) to najbardziej podstawowa i powszechnie używana jednostka CSS. Piksel to pojedynczy punkt w siatce obrazu cyfrowego i reprezentuje najmniejszy kontrolowany element na ekranie. W CSS piksele zapewniają jednostkę miary o stałej wielkości, która pozostaje spójna niezależnie od innych czynników stylizacji.

1.element {
2  width: 200px;
3  font-size: 16px;
4  margin: 10px;
5}
6

Kluczowe cechy pikseli:

Jednostki o stałej wielkości, które nie skalują się automatycznie
Zapewniają precyzyjną kontrolę nad wymiarami elementów
Łatwe do zrozumienia i wizualizacji
Mniej idealne dla responsywnego projektowania i dostępności

Czym są jednostki REM?

Jednostki REM (root em) to jednostki względne, które skalują się w oparciu o rozmiar czcionki elementu głównego (zwykle elementu <html>). Domyślnie większość przeglądarek ustawia rozmiar czcionki głównej na 16px, co sprawia, że 1rem równa się 16px, chyba że zostanie to wyraźnie zmienione.

1html {
2  font-size: 16px; /* Domyślnie w większości przeglądarek */
3}
4
5.element {
6  width: 12.5rem; /* Odpowiada 200px przy domyślnym rozmiarze czcionki głównej */
7  font-size: 1rem; /* Odpowiada 16px */
8  margin: 0.625rem; /* Odpowiada 10px */
9}
10

Kluczowe cechy jednostek REM:

Skalują się w odniesieniu do rozmiaru czcionki elementu głównego
Utrzymują spójne proporcje w całym dokumencie
Wspierają lepszą dostępność poprzez globalne dostosowania rozmiaru czcionki
Idealne do responsywnych układów i typografii

Czym są jednostki EM?

Jednostki EM to jednostki względne, które skalują się w oparciu o rozmiar czcionki ich elementu nadrzędnego. Jeśli nie określono rozmiaru czcionki dla rodzica, EM będą odnosić się do dziedziczonego rozmiaru czcionki.

1.parent {
2  font-size: 20px;
3}
4
5.child {
6  font-size: 0.8em; /* Odpowiada 16px (20px × 0.8) */
7  margin: 0.5em; /* Odpowiada 8px (16px × 0.5) */
8}
9

Kluczowe cechy jednostek EM:

Skalują się w odniesieniu do rozmiaru czcionki ich elementu nadrzędnego
Tworzą efekt kaskadowy, gdy są zagnieżdżone
Użyteczne do tworzenia proporcjonalnych projektów w komponentach
Mogą stać się skomplikowane do zarządzania przy głęboko zagnieżdżonych elementach

Wzory i obliczenia konwersji

Zrozumienie matematycznych relacji między jednostkami PX, REM i EM jest kluczowe dla dokładnych konwersji. Oto wzory używane w naszym konwerterze:

Konwersja PX na REM

Aby przekonwertować piksele na jednostki REM, podziel wartość pikseli przez rozmiar czcionki głównej:

$REM = \frac{PX}{rootFontSize}$

Na przykład, przy domyślnym rozmiarze czcionki głównej wynoszącym 16px:

16px = 1rem
24px = 1.5rem
8px = 0.5rem

Konwersja PX na EM

Aby przekonwertować piksele na jednostki EM, podziel wartość pikseli przez rozmiar czcionki elementu nadrzędnego:

$EM = \frac{PX}{parentFontSize}$

Na przykład, przy rozmiarze czcionki rodzica wynoszącym 16px:

16px = 1em
24px = 1.5em
8px = 0.5em

Konwersja REM na PX

Aby przekonwertować jednostki REM na piksele, pomnóż wartość REM przez rozmiar czcionki głównej:

$PX = REM \times rootFontSize$

Na przykład, przy domyślnym rozmiarze czcionki głównej wynoszącym 16px:

1rem = 16px
1.5rem = 24px
0.5rem = 8px

Konwersja EM na PX

Aby przekonwertować jednostki EM na piksele, pomnóż wartość EM przez rozmiar czcionki elementu nadrzędnego:

$PX = EM \times parentFontSize$

Na przykład, przy rozmiarze czcionki rodzica wynoszącym 16px:

1em = 16px
1.5em = 24px
0.5em = 8px

Konwersja REM na EM

Aby przekonwertować jednostki REM na jednostki EM, musisz uwzględnić zarówno rozmiar czcionki głównej, jak i rozmiar czcionki elementu nadrzędnego:

$EM = REM \times \frac{rootFontSize}{parentFontSize}$

Jeśli zarówno rozmiar główny, jak i rodzica są takie same (np. 16px), to 1rem = 1em.

Konwersja EM na REM

Aby przekonwertować jednostki EM na jednostki REM, użyj następującego wzoru:

$REM = EM \times \frac{parentFontSize}{rootFontSize}$

Ponownie, jeśli oba rozmiary czcionek są równe, to 1em = 1rem.

Jak używać konwertera jednostek PX, REM i EM

Nasze narzędzie konwertera ułatwia tłumaczenie wartości między jednostkami PX, REM i EM. Oto przewodnik krok po kroku, jak skutecznie korzystać z konwertera:

Podstawowe użycie

Wprowadź wartość w dowolnym polu wejściowym (PX, REM lub EM)
Konwerter automatycznie obliczy i wyświetli równoważne wartości w dwóch pozostałych jednostkach
Dostosuj rozmiar czcionki głównej (domyślnie: 16px), aby zobaczyć, jak wpływa to na konwersje REM
Dostosuj rozmiar czcionki rodzica (domyślnie: 16px), aby zobaczyć, jak wpływa to na konwersje EM
Użyj przycisku kopiowania obok każdego pola, aby skopiować wartość do schowka

Zaawansowane funkcje

Wizualne porównanie: Narzędzie zapewnia wizualną reprezentację względnych rozmiarów każdej jednostki
Kontrola precyzji: Wszystkie obliczenia zachowują 4 miejsca po przecinku dla dokładności
Wartości ujemne: Konwerter obsługuje wartości ujemne, które są ważne w CSS dla właściwości takich jak marginesy
Aktualizacje w czasie rzeczywistym: Każda zmiana wartości wejściowych lub ustawień rozmiaru czcionki natychmiast aktualizuje wszystkie obliczenia

Wskazówki dotyczące dokładnych konwersji

Aby uzyskać najdokładniejsze konwersje REM, ustaw rozmiar czcionki głównej, aby odpowiadał wartości <html> w Twoim projekcie
Aby uzyskać dokładne konwersje EM, ustaw rozmiar czcionki rodzica, aby odpowiadał rozmiarowi czcionki elementu nadrzędnego, nad którym pracujesz
Pamiętaj, że domyślne rozmiary czcionek przeglądarek mogą się różnić, chociaż 16px jest najczęściej stosowanym domyślnym rozmiarem

Praktyczne zastosowania konwersji jednostek CSS

Zrozumienie, kiedy używać każdej jednostki CSS i jak konwertować między nimi, jest kluczowe dla skutecznego rozwoju stron internetowych. Oto kilka praktycznych zastosowań i scenariuszy, w których nasz konwerter okazuje się nieoceniony:

Responsywne projektowanie stron internetowych

Konwersja między jednostkami jest niezbędna do tworzenia naprawdę responsywnych projektów:

Podejście mobile-first: Rozpocznij od podstawowego projektu w pikselach, a następnie przekonwertuj na jednostki względne dla skalowalności
Zarządzanie punktami przerwania: Użyj REM do spójnego odstępu w różnych rozmiarach widoku
Skalowanie komponentów: Upewnij się, że elementy interfejsu użytkownika utrzymują proporcjonalne relacje, gdy zmienia się widok

1/* Przekonwertuj stałe wartości pikseli na responsywne jednostki REM */
2.container {
3  /* Z: padding: 20px; */
4  padding: 1.25rem; /* 20px ÷ 16px = 1.25rem */
5  
6  /* Z: margin-bottom: 32px; */
7  margin-bottom: 2rem; /* 32px ÷ 16px = 2rem */
8}
9

Udoskonalenia dostępności

Użycie jednostek względnych poprawia dostępność, szanując preferencje użytkownika:

Zmiana rozmiaru tekstu: Gdy użytkownicy zmieniają rozmiar czcionki w przeglądarce, układy oparte na REM dostosowują się odpowiednio
Funkcjonalność powiększenia: Jednostki względne zapewniają, że projekty pozostają proporcjonalne, gdy użytkownicy powiększają
Poszanowanie preferencji użytkownika: Układy oparte na jednostkach względnych honorują domyślne ustawienia rozmiaru czcionki użytkownika

Systemy projektowe oparte na komponentach

Nowoczesne systemy projektowe korzystają z przemyślanej jednostki:

Spójne komponenty: Użyj REM do globalnej spójności odstępów i rozmiarów
Samodzielne moduły: Użyj EM dla elementów, które powinny skalować się z ich komponentami nadrzędnymi
Tokeny projektowe: Przekonwertuj między jednostkami podczas wdrażania tokenów projektowych w różnych kontekstach

Systemy typograficzne

Tworzenie harmonijnej typografii wymaga starannego wyboru jednostek:

Skale typograficzne: Zdefiniuj skalę typograficzną w REM dla spójnego postępu
Interlinie: Użyj wartości bez jednostki lub EM dla proporcjonalnych interlinii
Responsywny tekst: Dostosuj rozmiary czcionek w różnych punktach przerwania, zachowując proporcje

1/* System typograficzny używający jednostek REM */
2h1 { font-size: 2.5rem; }    /* 40px */
3h2 { font-size: 2rem; }      /* 32px */
4h3 { font-size: 1.5rem; }    /* 24px */
5h4 { font-size: 1.25rem; }   /* 20px */
6p { font-size: 1rem; }       /* 16px */
7small { font-size: 0.875rem; } /* 14px */
8

Projekty o wysokiej precyzji

Podczas wdrażania projektów z narzędzi takich jak Figma czy Photoshop:

Przekazywanie projektu: Przekonwertuj wartości pikseli z plików projektowych na REM/EM do rozwoju
Utrzymywanie precyzji: Zapewnij dokładne odstępy i rozmiary, używając jednostek względnych
Integracja systemu projektowego: Przetłumacz oparte na pikselach tokeny projektowe na jednostki względne

Alternatywne jednostki CSS

Chociaż PX, REM i EM są najczęściej używanymi jednostkami, istnieją alternatywy, które warto rozważyć:

Jednostki viewport (VW, VH)

VW (szerokość viewportu): 1vw równa się 1% szerokości viewportu
VH (wysokość viewportu): 1vh równa się 1% wysokości viewportu
Zastosowanie: Tworzenie elementów, które skalują się bezpośrednio z rozmiarem viewportu

Procenty (%)

Względne do wymiarów elementu nadrzędnego
Zastosowanie: Płynne układy i responsywne szerokości

Jednostki CH

Oparte na szerokości znaku "0"
Zastosowanie: Tworzenie kontenerów z określoną liczbą znaków na linii

Jednostki EX

Oparte na wysokości małej litery "x"
Zastosowanie: Drobne dostosowania typografii, szczególnie dla wysokości x

Ewolucja jednostek CSS w rozwoju stron internetowych

Historia jednostek CSS odzwierciedla szerszą ewolucję projektowania stron internetowych, od statycznych układów do dzisiejszych responsywnych, dostępnych podejść.

Wczesne projektowanie stron internetowych (lata 90.)

W pierwszych dniach CSS piksele były dominujące. Projektanci stron tworzyli układy o stałej szerokości, zazwyczaj 640px lub 800px, aby dostosować się do typowych rozdzielczości ekranów. Dostępność i różnorodność urządzeń nie były głównymi problemami, a kontrola pikselowa była głównym celem.

Wzrost układów płynnych (początek lat 2000)

W miarę różnicowania się rozmiarów ekranów, układy oparte na procentach zyskały na popularności. Projektanci zaczęli tworzyć bardziej elastyczne projekty, chociaż typografia często pozostawała w jednostkach pikselowych. W tej erze wprowadzono jednostki EM w CSS, chociaż ich przyjęcie było ograniczone z powodu złożoności zarządzania dziedziczeniem rozmiarów czcionek.

Rewolucja mobilna (2007-2010)

Wprowadzenie iPhone'a w 2007 roku zmieniło projektowanie stron internetowych. Nagle strony musiały działać na ekranach tak małych jak 320px szerokości. To zainicjowało zainteresowanie technikami responsywnego projektowania i jednostkami względnymi. Ograniczenia jednostek EM (szczególnie efekt kaskadowy) stały się bardziej widoczne, gdy projekty stawały się bardziej złożone.

Era responsywnego projektowania stron (2010-2015)

Wpływowy artykuł Ethana Marcotte'a na temat responsywnego projektowania stron w 2010 roku zmienił sposób, w jaki deweloperzy podchodzili do jednostek CSS. Jednostka REM została wprowadzona w CSS3, oferując korzyści ze względnego skalowania bez kaskadowych komplikacji jednostek EM. Wsparcie przeglądarek dla jednostek REM rosło stopniowo w tym okresie.

Nowoczesne podejścia CSS (2015-obecnie)

Dzisiejszy rozwój stron internetowych przyjmuje mieszankę jednostek do różnych celów:

Jednostki REM dla globalnej spójności i dostępności
Jednostki EM dla skalowania specyficznego dla komponentów
Piksele dla granic i szczegółów
Jednostki viewport dla naprawdę responsywnych elementów
Funkcja CSS calc() do łączenia różnych typów jednostek

Ta ewolucja odzwierciedla przejście internetu od medium opartego na dokumentach do złożonej platformy aplikacyjnej, która musi działać na niezliczonych urządzeniach i w różnych kontekstach.

Przykłady kodu do konwersji jednostek

Funkcje konwertera jednostek w JavaScript

1// Konwertuj między jednostkami PX, REM i EM
2const pxToRem = (px, rootFontSize = 16) => {
3  return px / rootFontSize;
4};
5
6const pxToEm = (px, parentFontSize = 16) => {
7  return px / parentFontSize;
8};
9
10const remToPx = (rem, rootFontSize = 16) => {
11  return rem * rootFontSize;
12};
13
14const emToPx = (em, parentFontSize = 16) => {
15  return em * parentFontSize;
16};
17
18const remToEm = (rem, rootFontSize = 16, parentFontSize = 16) => {
19  return rem * (rootFontSize / parentFontSize);
20};
21
22const emToRem = (em, parentFontSize = 16, rootFontSize = 16) => {
23  return em * (parentFontSize / rootFontSize);
24};
25
26// Przykład użycia
27console.log(pxToRem(24));  // 1.5
28console.log(remToPx(1.5)); // 24
29console.log(pxToEm(24, 24)); // 1
30console.log(remToEm(2, 16, 32)); // 1
31

Właściwości niestandardowe CSS do konwersji jednostek

1:root {
2  /* Podstawowe rozmiary czcionek */
3  --root-font-size: 16px;
4  --base-font-size: var(--root-font-size);
5  
6  /* Wspólne wartości pikseli przekonwertowane na REM */
7  --space-4px: 0.25rem;
8  --space-8px: 0.5rem;
9  --space-16px: 1rem;
10  --space-24px: 1.5rem;
11  --space-32px: 2rem;
12  --space-48px: 3rem;
13  
14  /* Skala typograficzna */
15  --text-xs: 0.75rem;    /* 12px */
16  --text-sm: 0.875rem;   /* 14px */
17  --text-base: 1rem;     /* 16px */
18  --text-lg: 1.125rem;   /* 18px */
19  --text-xl: 1.25rem;    /* 20px */
20  --text-2xl: 1.5rem;    /* 24px */
21}
22
23/* Przykład użycia */
24.card {
25  padding: var(--space-16px);
26  margin-bottom: var(--space-24px);
27  font-size: var(--text-base);
28}
29
30.card-title {
31  font-size: var(--text-xl);
32  margin-bottom: var(--space-8px);
33}
34

Miksiny SCSS do konwersji jednostek

1// Funkcje SCSS do konwersji jednostek
2@function px-to-rem($px, $root-font-size: 16) {
3  @return ($px / $root-font-size) * 1rem;
4}
5
6@function px-to-em($px, $parent-font-size: 16) {
7  @return ($px / $parent-font-size) * 1em;
8}
9
10@function rem-to-px($rem, $root-font-size: 16) {
11  @return $rem * $root-font-size * 1px;
12}
13
14// Przykład użycia
15.element {
16  padding: px-to-rem(20);
17  margin: px-to-rem(32);
18  font-size: px-to-rem(18);
19  
20  .nested {
21    // Używając rozmiaru czcionki rodzica (18px) do konwersji em
22    padding: px-to-em(16, 18);
23    margin-bottom: px-to-em(24, 18);
24  }
25}
26

Konwerter jednostek w Pythonie

1def px_to_rem(px, root_font_size=16):
2    """Konwertuj piksele na jednostki REM"""
3    return px / root_font_size
4
5def rem_to_px(rem, root_font_size=16):
6    """Konwertuj jednostki REM na piksele"""
7    return rem * root_font_size
8
9def px_to_em(px, parent_font_size=16):
10    """Konwertuj piksele na jednostki EM"""
11    return px / parent_font_size
12
13def em_to_px(em, parent_font_size=16):
14    """Konwertuj jednostki EM na piksele"""
15    return em * parent_font_size
16
17# Przykład użycia
18print(f"16px = {px_to_rem(16)}rem")  # 16px = 1.0rem
19print(f"2rem = {rem_to_px(2)}px")    # 2rem = 32px
20print(f"24px = {px_to_em(24, 16)}em")  # 24px = 1.5em
21

Najczęściej zadawane pytania

Jaka jest różnica między jednostkami REM a EM?

Jednostki REM (root em) są względne w odniesieniu do rozmiaru czcionki elementu głównego (zwykle elementu <html>), podczas gdy jednostki EM są względne w odniesieniu do rozmiaru czcionki ich elementu nadrzędnego. Ta kluczowa różnica oznacza, że jednostki REM utrzymują spójne rozmiary w całym dokumencie, niezależnie od zagnieżdżenia, podczas gdy jednostki EM mogą tworzyć efekt kumulacji, gdy elementy są zagnieżdżone.

Która jednostka CSS jest najlepsza do responsywnego projektowania?

Nie ma jednej "najlepszej" jednostki dla wszystkich sytuacji. Najczęściej skuteczne jest zastosowanie kombinacji jednostek:

Jednostki REM dla typografii i spójnych odstępów
Jednostki EM dla skalowania specyficznego dla komponentów
Procenty lub jednostki viewport dla szerokości układów
Piksele dla granic i małych detali

Idealne podejście to użycie każdej jednostki do tego, co robi najlepiej w ramach spójnego systemu.

Dlaczego przeglądarki domyślnie ustawiają rozmiar czcionki na 16px?

Domyślny rozmiar 16px został ustalony jako standard czytelności, który dobrze działa na różnych urządzeniach. Badania wykazały, że tekst o rozmiarze około 16px jest optymalny do czytania na ekranach w typowych odległościach widzenia. Ten domyślny rozmiar zapewnia również dobrą bazę dla dostępności, zapewniając, że tekst nie jest zbyt mały dla większości użytkowników.

Czy mogę używać wartości ujemnych z tymi jednostkami?

Tak, CSS obsługuje wartości ujemne dla wielu właściwości przy użyciu dowolnego typu jednostki. Wartości ujemne dla marginesów, translacji i pozycji są powszechnymi przypadkami użycia. Nasz konwerter poprawnie obsługuje wartości ujemne dla wszystkich typów jednostek.

Jak działają jednostki EM z zagnieżdżonymi elementami?

Jednostki EM kumulują się, gdy elementy są zagnieżdżone. Na przykład:

1.parent {
2  font-size: 16px;
3}
4.child {
5  font-size: 1.5em; /* 24px (16px × 1.5) */
6}
7.grandchild {
8  font-size: 1.5em; /* 36px (24px × 1.5) */
9}
10

Ten efekt kumulacji może być użyteczny do tworzenia proporcjonalnych projektów, ale wymaga starannego zarządzania, aby uniknąć niezamierzonego skalowania.

Jak obsługiwać wyświetlacze o wysokiej gęstości (Retina) z jednostkami CSS?

Wyświetlacze o wysokiej gęstości są obsługiwane automatycznie, gdy używasz jednostek względnych, takich jak REM i EM. Ponieważ te jednostki opierają się na rozmiarze czcionki, a nie fizycznych pikselach, skalują się odpowiednio na ekranach o wysokiej rozdzielczości. W przypadku obrazów i granic rozważ użycie zapytań medialnych z urządzeniem-piksel-ratio lub rozdzielczością.

Czy powinienem używać REM czy EM w zapytaniach medialnych?

Wsparcie przeglądarek dla jednostek REM i EM w zapytaniach medialnych znacznie się poprawiło. Użycie jednostek EM w zapytaniach medialnych jest ogólnie zalecane, ponieważ:

Są względne do domyślnego rozmiaru czcionki przeglądarki
Szanują preferencje rozmiaru czcionki użytkownika
Zapewniają spójne punkty przerwania w różnych przeglądarkach

1/* Używając jednostek EM w zapytaniach medialnych */
2@media (min-width: 48em) {  /* 768px przy 16px bazie */
3  /* Style dla tabletów */
4}
5
6@media (min-width: 64em) {  /* 1024px przy 16px bazie */
7  /* Style dla komputerów stacjonarnych */
8}
9

Jak konwertować jednostki w narzędziach projektowych, takich jak Figma czy Sketch?

Większość narzędzi projektowych działa głównie w pikselach. Podczas wdrażania projektów:

Zanotuj rozmiar czcionki głównej swojego projektu (zwykle 16px)
Podziel wartości pikseli przez rozmiar czcionki głównej, aby uzyskać wartości REM
Dla wartości EM podziel przez rozmiar czcionki elementu nadrzędnego
Rozważ stworzenie tokenów projektowych lub zmiennych dla wspólnych wartości

Niektóre narzędzia projektowe mają wtyczki, które mogą pomóc w tym procesie konwersji automatycznie.

Jak przeglądarki obsługują renderowanie subpikseli z jednostkami względnymi?

Przeglądarki obsługują wartości subpikselowe różnie. Niektóre przeglądarki zaokrąglają do najbliższego piksela, podczas gdy inne obsługują renderowanie subpikselowe dla gładszego skalowania. Może to czasami powodować niewielkie niespójności między przeglądarkami, szczególnie przy małych wartościach REM/EM lub gdy używane są transformacje. W większości przypadków te różnice są nieznaczne.

Jaki jest wpływ wydajności używania różnych jednostek CSS?

Nie ma znaczącej różnicy w wydajności między używaniem pikseli, REM czy EM w nowoczesnych przeglądarkach. Wybór jednostek powinien opierać się na wymaganiach projektowych, zachowaniu responsywnym i potrzebach dostępności, a nie na rozważaniach dotyczących wydajności.

Odniesienia i dalsze czytanie

"CSS Values and Units Module Level 3." W3C Recommendation. https://www.w3.org/TR/css-values-3/
Marcotte, Ethan. "Responsive Web Design." A List Apart, 25 maja 2010. https://alistapart.com/article/responsive-web-design/
Rutter, Richard. "The Elements of Typographic Style Applied to the Web." http://webtypography.net/
"Jednostki CSS." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
"CSS Pixels vs. Physical Pixels." Stack Overflow Documentation. https://stackoverflow.com/questions/8785643/what-exactly-is-the-difference-between-css-pixels-and-device-pixels
Coyier, Chris. "The Lengths of CSS." CSS-Tricks. https://css-tricks.com/the-lengths-of-css/
"Używanie właściwości niestandardowych CSS (zmiennych)." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
"Zrozumienie i używanie jednostek rem w CSS." SitePoint. https://www.sitepoint.com/understanding-and-using-rem-units-in-css/

Wypróbuj nasz konwerter jednostek już dziś

Przestań walczyć z ręcznymi konwersjami jednostek CSS i pozwól naszemu konwerterowi PX, REM i EM wykonać pracę za Ciebie. Niezależnie od tego, czy budujesz responsywną stronę internetową, tworzysz system projektowy, czy po prostu uczysz się o jednostkach CSS, to narzędzie zaoszczędzi Twój czas i zapewni dokładność. Wprowadź swoje wartości teraz, aby zobaczyć, jak łatwa może być konwersja jednostek!

Konwerter PX na REM i EM: Kalkulator jednostek CSS

Kalkulator konwertera jednostek PX, REM i EM

Wzory konwersji

Dokumentacja