PX, REM a EM prevodník: Základné CSS jednotky vysvetlené

Úvod do prevodu CSS jednotiek

Pochopenie a prevod medzi CSS jednotkami je zásadné pre responzívny webový dizajn a vývoj. Jednotky PX (pixel), REM (root em) a EM sú základné stavebné bloky, ktoré určujú, ako sú prvky veľkostne a umiestnené na rôznych zariadeniach a veľkostiach obrazoviek. Tento komplexný prevodník jednotiek vám umožňuje jednoducho prevádzať hodnoty medzi týmito tromi kritickými CSS jednotkami, čo vám pomôže vytvoriť flexibilnejšie a udržateľnejšie webové rozloženia.

Pixely (PX) sú jednotky pevnej veľkosti, ktoré poskytujú presnú kontrolu, ale postrádajú škálovateľnosť, zatiaľ čo jednotky REM sa škálujú relatívne k veľkosti písma koreňového prvku a jednotky EM sa škálujú relatívne k veľkosti písma svojho rodičovského prvku. Prevody medzi týmito jednotkami môžu byť náročné, najmä pri práci s komplexnými dizajnmi alebo pri podpore funkcií prístupnosti, ako je zmenšovanie textu. Náš prevodník PX, REM a EM zjednodušuje tento proces, čo vám umožňuje sústrediť sa na vytváranie krásnych, responzívnych dizajnov.

Pochopenie CSS jednotiek: PX, REM a EM

Čo sú pixely (PX)?

Pixely (PX) sú najzákladnejšou a najčastejšie používanou CSS jednotkou. Pixel je jediný bod v mriežke digitálneho obrazu a predstavuje najmenší ovládateľný prvok na obrazovke. V CSS pixely poskytujú jednotku merania pevnej veľkosti, ktorá zostáva konzistentná bez ohľadu na iné faktory štýlovania.

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

Kľúčové charakteristiky pixelov:

Jednotky pevnej veľkosti, ktoré sa automaticky neskalujú
Poskytujú presnú kontrolu nad rozmermi prvkov
Ľahko sa chápu a vizualizujú
Menej ideálne pre responzívny dizajn a prístupnosť

Čo sú jednotky REM?

Jednotky REM (root em) sú relatívne jednotky, ktoré sa škálujú na základe veľkosti písma koreňového prvku (typicky prvok <html>). Predvolene väčšina prehliadačov nastavuje veľkosť koreňového písma na 16px, čo znamená, že 1rem sa rovná 16px, pokiaľ nie je výslovne zmenené.

1html {
2  font-size: 16px; /* Predvolené v väčšine prehliadačov */
3}
4
5.element {
6  width: 12.5rem; /* Zodpovedá 200px s predvolenou veľkosťou koreňového písma */
7  font-size: 1rem; /* Zodpovedá 16px */
8  margin: 0.625rem; /* Zodpovedá 10px */
9}
10

Kľúčové charakteristiky jednotiek REM:

Škálovanie relatívne k veľkosti písma koreňového prvku
Udržujú konzistentné proporcie v celom dokumente
Podporujú lepšiu prístupnosť prostredníctvom globálnych úprav veľkosti písma
Ideálne pre responzívne rozloženia a typografiu

Čo sú jednotky EM?

Jednotky EM sú relatívne jednotky, ktoré sa škálujú na základe veľkosti písma svojho rodičovského prvku. Ak nie je veľkosť písma pre rodiča špecifikovaná, EM sa odkazujú na zdedenú veľkosť písma.

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

Kľúčové charakteristiky jednotiek EM:

Škálovanie relatívne k veľkosti písma svojho rodičovského prvku
Vytvárajú kaskádový efekt pri vnorení
Užitečné na vytváranie proporčných dizajnov v rámci komponentov
Môžu sa stať zložitými na správu pri hlboko vnorených prvkoch

Prevádzkové vzorce a výpočty

Pochopenie matematických vzťahov medzi jednotkami PX, REM a EM je kľúčové pre presné prevody. Tu sú vzorce použité v našom prevodníku:

Prevody PX na REM

Na prevod pixelov na jednotky REM vydelte hodnotu pixelov veľkosťou koreňového písma:

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

Napríklad, s predvolenou veľkosťou koreňového písma 16px:

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

Prevody PX na EM

Na prevod pixelov na jednotky EM vydelte hodnotu pixelov veľkosťou písma rodičovského prvku:

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

Napríklad, s veľkosťou písma rodiča 16px:

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

Prevody REM na PX

Na prevod jednotiek REM na pixely vynásobte hodnotu REM veľkosťou koreňového písma:

$PX = REM \times rootFontSize$

Napríklad, s predvolenou veľkosťou koreňového písma 16px:

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

Prevody EM na PX

Na prevod jednotiek EM na pixely vynásobte hodnotu EM veľkosťou písma rodičovského prvku:

$PX = EM \times parentFontSize$

Napríklad, s veľkosťou písma rodiča 16px:

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

Prevody REM na EM

Na prevod jednotiek REM na jednotky EM musíte zohľadniť veľkosť písma koreňového prvku aj veľkosť písma rodičovského prvku:

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

Ak sú veľkosti koreňového a rodičovského písma rovnaké (napr. 16px), potom 1rem = 1em.

Prevody EM na REM

Na prevod jednotiek EM na jednotky REM použite nasledujúci vzorec:

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

Opäť, ak sú obe veľkosti písma rovnaké, potom 1em = 1rem.

Ako používať prevodník jednotiek PX, REM a EM

Náš nástroj na prevod jednotiek uľahčuje prevod hodnôt medzi jednotkami PX, REM a EM. Tu je krok-za-krokom sprievodca, ako efektívne používať prevodník:

Základné použitie

Zadajte hodnotu do akéhokoľvek vstupného poľa (PX, REM alebo EM)
Prevodník automaticky vypočíta a zobrazí ekvivalentné hodnoty v ďalších dvoch jednotkách
Upravte veľkosť koreňového písma (predvolené: 16px), aby ste videli, ako to ovplyvňuje prevody REM
Upravte veľkosť písma rodiča (predvolené: 16px), aby ste videli, ako to ovplyvňuje prevody EM
Použite tlačidlo kopírovať vedľa každého poľa na skopírovanie hodnoty do schránky

Pokročilé funkcie

Vizualizácia porovnania: Nástroj poskytuje vizuálne znázornenie relatívnych veľkostí každej jednotky
Ovládanie presnosti: Všetky výpočty udržiavajú 4 desatinné miesta pre presnosť
Negatívne hodnoty: Prevodník podporuje negatívne hodnoty, ktoré sú platné v CSS pre vlastnosti ako okraje
Aktualizácie v reálnom čase: Akákoľvek zmena vstupných hodnôt alebo nastavení veľkosti písma okamžite aktualizuje všetky výpočty

Tipy na presné prevody

Pre najpresnejšie prevody REM nastavte veľkosť koreňového písma tak, aby zodpovedala hodnote <html> vo vašom projekte
Pre presné prevody EM nastavte veľkosť písma rodiča tak, aby zodpovedala veľkosti písma rodičovského prvku, s ktorým pracujete
Pamätajte, že predvolené veľkosti písma prehliadača sa môžu líšiť, hoci 16px je najbežnejšia predvolená hodnota

Praktické prípady použitia prevodu CSS jednotiek

Pochopenie, kedy použiť každú CSS jednotku a ako medzi nimi prevádzať, je kľúčové pre efektívny webový vývoj. Tu sú niektoré praktické aplikácie a scenáre, kde náš prevodník dokazuje svoju hodnotu:

Responzívny webový dizajn

Prevody medzi jednotkami sú zásadné pre vytváranie skutočne responzívnych dizajnov:

Prístup založený na mobiloch: Začnite s základným dizajnom v pixeloch, potom prejdite na relatívne jednotky pre škálovateľnosť
Správa bodov zlomu: Použite REM pre konzistentné rozostupy naprieč rôznymi veľkosťami zobrazenia
Škálovanie komponentov: Zabezpečte, aby si UI prvky udržali proporčné vzťahy pri zmene zobrazenia

1/* Preveďte pevné hodnoty v pixeloch na responzívne jednotky 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

Zlepšenia prístupnosti

Používanie relatívnych jednotiek zlepšuje prístupnosť rešpektovaním preferencií používateľov:

Zmenšovanie textu: Keď používateľ zmení veľkosť písma v prehliadači, rozloženia založené na REM sa prispôsobia
Funkcia priblíženia: Relatívne jednotky zabezpečujú, že dizajny zostanú proporcionálne, keď sa používateľ priblíži
Rešpektovanie používateľských preferencií: Rozloženia založené na relatívnych jednotkách ctia predvolené nastavenia veľkosti písma používateľa

Dizajnové systémy založené na komponentoch

Moderné dizajnové systémy ťažia z premyslenej voľby jednotiek:

Konzistentné komponenty: Použite REM pre globálnu konzistenciu rozostupov a veľkostí
Sebeobsahujúce moduly: Použite EM pre prvky, ktoré by sa mali škálovať s rodičovskými komponentmi
Dizajnové tokeny: Preveďte medzi jednotkami pri implementácii dizajnových tokenov v rôznych kontextoch

Typografické systémy

Vytvorenie harmonickej typografie si vyžaduje starostlivé výber jednotiek:

Typografické škály: Definujte typografickú škálu v REM pre konzistentný postup
Výšky riadkov: Použite bezjednotkové hodnoty alebo EM pre proporcionálne výšky riadkov
Responzívny text: Upravte veľkosti písma naprieč bodmi zlomu, pričom zachováte proporcie

1/* Typografický systém pomocou jednotiek 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

Dizajny s presnosťou na pixel

Pri implementácii dizajnov z nástrojov ako Figma alebo Photoshop:

Odovzdanie dizajnu: Preveďte hodnoty pixelov z dizajnových súborov na REM/EM pre vývoj
Zachovanie presnosti: Zabezpečte presné rozostupy a veľkosti pri používaní relatívnych jednotiek
Integrácia dizajnového systému: Preveďte hodnoty dizajnových tokenov založených na pixeloch na relatívne jednotky

Alternatívne CSS jednotky

Aj keď sú PX, REM a EM najbežnejšími jednotkami, existujú aj alternatívy, ktoré stojí za to zvážiť:

Jednotky zorného poľa (VW, VH)

VW (šírka zorného poľa): 1vw sa rovná 1% šírky zorného poľa
VH (výška zorného poľa): 1vh sa rovná 1% výšky zorného poľa
Prípad použitia: Vytváranie prvkov, ktoré sa priamo škálujú so zorným poľom

Percentá (%)

Relatívne k rozmerom rodičovského prvku
Prípad použitia: Tekuté rozloženia a responzívne šírky

Jednotky CH

Na základe šírky znaku "0"
Prípad použitia: Vytváranie kontajnerov s konkrétnym počtom znakov na riadok

Jednotky EX

Na základe výšky znaku malého "x"
Prípad použitia: Jemné doladenie typografie, najmä pre úpravy x-výšky

Evolúcia CSS jednotiek vo webovom vývoji

História CSS jednotiek odráža širšiu evolúciu webového dizajnu, od statických rozložení po dnešné responzívne, prístupné prístupy.

Raný webový dizajn (1990)

V raných dňoch CSS prevládali pixely. Weboví dizajnéri vytvárali rozloženia s pevnou šírkou, zvyčajne 640px alebo 800px široké, aby vyhovovali bežným rozlíšeniam obrazoviek. Prístupnosť a rozmanitosť zariadení neboli hlavné obavy a cieľom bola predovšetkým kontrola na pixel.

Nárast tekutých rozložení (začiatok 2000)

Keď sa veľkosti obrazoviek diverzifikovali, percentuálne rozloženia získali na popularite. Dizajnéri začali vytvárať flexibilnejšie dizajny, hoci typografia často zostávala v pixelových jednotkách. Toto obdobie zaznamenalo zavedenie jednotiek EM v CSS, hoci ich prijatie bolo obmedzené kvôli zložitosti správy kaskádových veľkostí písma.

Mobilná revolúcia (2007-2010)

Zavedenie iPhonu v roku 2007 transformovalo webový dizajn. Zrazu potrebovali webové stránky fungovať na obrazovkách s veľkosťou iba 320px. To vyvolalo záujem o techniky responzívneho dizajnu a relatívne jednotky. Obmedzenia jednotiek EM (najmä kaskádový efekt) sa stali zjavnejšími, keď sa dizajny stali zložitejšími.

Éra responzívneho webového dizajnu (2010-2015)

Vplyvný článok Ethana Marcottea o responzívnom webovom dizajne z roku 2010 zmenil spôsob, akým vývojári pristupovali k CSS jednotkám. Jednotka REM bola zavedená v CSS3, ponúkajúca výhody relatívneho škálovania bez kaskádových komplikácií jednotiek EM. Podpora prehliadačov pre jednotky REM sa počas tohto obdobia postupne zvyšovala.

Moderné prístupy CSS (2015-doteraz)

Dnešný webový vývoj prijíma mix jednotiek pre rôzne účely:

Jednotky REM pre globálnu konzistenciu a prístupnosť
Jednotky EM pre škálovanie špecifické pre komponenty
Pixely pre okraje a presné detaily
Jednotky zorného poľa pre skutočne responzívne prvky
Funkcia CSS calc() na kombinovanie rôznych typov jednotiek

Táto evolúcia odráža prechod webu z dokumentového média na komplexnú aplikačnú platformu, ktorá musí fungovať na nespočetných zariadeniach a v rôznych kontextoch.

Kódové príklady na prevod jednotiek

JavaScript funkcie prevodníka jednotiek

1// Prevod medzi jednotkami PX, REM a 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// Príklad použitia
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

CSS vlastnosti pre prevod jednotiek

1:root {
2  /* Základné veľkosti písma */
3  --root-font-size: 16px;
4  --base-font-size: var(--root-font-size);
5  
6  /* Bežné pixelové hodnoty prevedené 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  /* Typografická škála */
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/* Príklad použitia */
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

SCSS mixiny pre prevod jednotiek

1// SCSS funkcie pre prevod jednotiek
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// Príklad použitia
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    // Použitie veľkosti písma rodiča (18px) pre prevod EM
22    padding: px-to-em(16, 18);
23    margin-bottom: px-to-em(24, 18);
24  }
25}
26

Python prevodník jednotiek

1def px_to_rem(px, root_font_size=16):
2    """Prevod pixelov na jednotky REM"""
3    return px / root_font_size
4
5def rem_to_px(rem, root_font_size=16):
6    """Prevod jednotiek REM na pixely"""
7    return rem * root_font_size
8
9def px_to_em(px, parent_font_size=16):
10    """Prevod pixelov na jednotky EM"""
11    return px / parent_font_size
12
13def em_to_px(em, parent_font_size=16):
14    """Prevod jednotiek EM na pixely"""
15    return em * parent_font_size
16
17# Príklad použitia
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

Často kladené otázky

Aký je rozdiel medzi jednotkami REM a EM?

Jednotky REM (root em) sú relatívne k veľkosti písma koreňového prvku (typicky prvok <html>), zatiaľ čo jednotky EM sú relatívne k veľkosti písma svojho rodičovského prvku. Tento kľúčový rozdiel znamená, že jednotky REM udržujú konzistentné veľkosti v celom dokumente bez ohľadu na vnorenie, zatiaľ čo jednotky EM môžu vytvárať kumulatívny efekt pri vnorených prvkoch.

Ktorá CSS jednotka je najlepšia pre responzívny dizajn?

Neexistuje jediná "najlepšia" jednotka pre všetky situácie. Kombinácia jednotiek je zvyčajne najefektívnejšia:

Jednotky REM pre typografiu a konzistentné rozostupy
Jednotky EM pre škálovanie špecifické pre komponenty
Percentá alebo jednotky zorného poľa pre šírky rozloženia
Pixely pre okraje a malé detaily

Ideálny prístup je používať každú jednotku na to, čo robí najlepšie v rámci koherentného systému.

Prečo prehliadače predvolene nastavujú veľkosť písma na 16px?

Predvolená hodnota 16px bola stanovená ako štandard čitateľnosti, ktorý funguje dobre na obrazovkách. Výskum ukázal, že text okolo 16px je optimálny na čítanie na obrazovkách pri typických vzdialenostiach pozorovania. Táto predvolená hodnota tiež poskytuje dobrý základ pre prístupnosť, zabezpečujúc, že text nie je pre väčšinu používateľov príliš malý.

Môžem používať negatívne hodnoty s týmito jednotkami?

Áno, CSS podporuje negatívne hodnoty pre mnohé vlastnosti pomocou akéhokoľvek typu jednotky. Negatívne okraje, transformácie a umiestnenia sú bežné prípady použitia pre negatívne hodnoty. Náš prevodník správne spracováva negatívne hodnoty pre všetky typy jednotiek.

Ako fungujú jednotky EM s vnorenými prvkami?

Jednotky EM sa kumulujú, keď sú prvky vnorené. Napríklad:

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

Tento kumulatívny efekt môže byť užitočný pri vytváraní proporcionálnych dizajnov, ale vyžaduje si starostlivé riadenie, aby sa predišlo neúmyselnému škálovaniu.

Ako sa prehliadače vyrovnávajú s subpixelovým vykreslením relatívnych jednotiek?

Prehliadače sa s subpixelovými hodnotami vyrovnávajú rôzne. Niektoré prehliadače zaokrúhľujú na najbližší pixel, zatiaľ čo iné podporujú subpixelové vykreslenie pre hladšie škálovanie. To môže občas spôsobiť drobné nekonzistencie naprieč prehliadačmi, najmä s malými hodnotami REM/EM alebo pri používaní transformácií. Pre väčšinu prípadov sú tieto rozdiely zanedbateľné.

Aký je vplyv na výkon pri používaní rôznych CSS jednotiek?

Medzi používaním pixelov, REM alebo EM jednotiek v moderných prehliadačoch nie je významný rozdiel v výkone. Voľba jednotiek by mala byť založená na požiadavkách dizajnu, responzívnom správaní a potrebách prístupnosti, nie na úvahách o výkone.

Odkazy a ďalšie čítanie

"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. mája 2010. https://alistapart.com/article/responsive-web-design/
Rutter, Richard. "The Elements of Typographic Style Applied to the Web." http://webtypography.net/
"CSS Units." 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/
"Using CSS custom properties (variables)." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
"Understanding and Using rem Units in CSS." SitePoint. https://www.sitepoint.com/understanding-and-using-rem-units-in-css/

Vyskúšajte náš prevodník jednotiek ešte dnes

Prestaňte sa trápiť s manuálnymi prevodmi CSS jednotiek a nechajte náš prevodník PX, REM a EM vykonať prácu za vás. Či už vytvárate responzívnu webovú stránku, vytvárate dizajnový systém alebo sa len učíte o CSS jednotkách, tento nástroj vám ušetrí čas a zabezpečí presnosť. Zadajte svoje hodnoty teraz, aby ste videli, aké jednoduché môže byť prevádzanie jednotiek!

Prevádzač PX na REM a EM: Kalkulačka CSS jednotiek

Prevádzač jednotiek PX, REM a EM

Vzorce prevodu

Dokumentácia