PX, REM a EM převodník: Základní CSS jednotky vysvětleny

Úvod do převodu CSS jednotek

Pochopení a převod mezi CSS jednotkami je nezbytné pro responzivní webový design a vývoj. Jednotky PX (pixel), REM (root em) a EM jsou základními stavebními bloky, které určují, jak jsou prvky velikostně a umístěny na různých zařízeních a velikostech obrazovek. Tento komplexní nástroj pro převod jednotek umožňuje snadno překládat hodnoty mezi těmito třemi klíčovými CSS jednotkami, což vám pomůže vytvořit flexibilnější a udržovatelnější webové rozvržení.

Pixely (PX) jsou jednotky pevné velikosti, které poskytují přesnou kontrolu, ale postrádají škálovatelnost, zatímco jednotky REM se škálují v závislosti na velikosti písma kořenového prvku a jednotky EM se škálují v závislosti na velikosti písma jejich nadřazeného prvku. Převod mezi těmito jednotkami může být náročný, zejména při práci s komplexními návrhy nebo při podpoře funkcí přístupnosti, jako je změna velikosti textu. Náš převodník PX, REM a EM tento proces zjednodušuje, což vám umožňuje soustředit se na vytváření krásných, responzivních návrhů.

Pochopení CSS jednotek: PX, REM a EM

Co jsou pixely (PX)?

Pixely (PX) jsou nejzákladnější a nejčastěji používanou CSS jednotkou. Pixel je jediný bod v mřížce digitálního obrazu a představuje nejmenší ovladatelný prvek na obrazovce. V CSS poskytují pixely jednotku měření pevné velikosti, která zůstává konzistentní bez ohledu na jiné stylové faktory.

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

Klíčové charakteristiky pixelů:

Jednotky pevné velikosti, které se automaticky neskalují
Poskytují přesnou kontrolu nad rozměry prvků
Snadno se chápou a vizualizují
Méně ideální pro responzivní design a přístupnost

Co jsou jednotky REM?

Jednotky REM (root em) jsou relativní jednotky, které se škálují na základě velikosti písma kořenového prvku (typicky elementu <html>). Ve výchozím nastavení většina prohlížečů nastavuje velikost písma kořene na 16px, což znamená, že 1rem je rovno 16px, pokud není výslovně změněno.

1html {
2  font-size: 16px; /* Výchozí v většině prohlížečů */
3}
4
5.element {
6  width: 12.5rem; /* Ekvivalent 200px při výchozí velikosti písma kořene */
7  font-size: 1rem; /* Ekvivalent 16px */
8  margin: 0.625rem; /* Ekvivalent 10px */
9}
10

Klíčové charakteristiky jednotek REM:

Škálují se relativně k velikosti písma kořenového prvku
Udržují konzistentní proporce v celém dokumentu
Podporují lepší přístupnost prostřednictvím globálních úprav velikosti písma
Ideální pro responzivní rozvržení a typografii

Co jsou jednotky EM?

Jednotky EM jsou relativní jednotky, které se škálují na základě velikosti písma jejich nadřazeného prvku. Pokud není velikost písma pro nadřazený prvek specifikována, EM se odkazují na zděděnou velikost písma.

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

Klíčové charakteristiky jednotek EM:

Škálují se relativně k velikosti písma jejich nadřazeného prvku
Vytvářejí kaskádový efekt při vnoření
Užitečné pro vytváření proporcionálních návrhů v rámci komponent
Mohou se stát složitými na správu s hluboce vnořenými prvky

Převodní vzorce a výpočty

Pochopení matematických vztahů mezi jednotkami PX, REM a EM je klíčové pro přesné převody. Zde jsou vzorce použité v našem převodníku:

Převod PX na REM

Pro převod pixelů na jednotky REM vydělte hodnotu pixelů velikostí písma kořene:

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

Například, při výchozí velikosti písma kořene 16px:

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

Převod PX na EM

Pro převod pixelů na jednotky EM vydělte hodnotu pixelů velikostí písma nadřazeného prvku:

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

Například, při velikosti písma nadřazeného prvku 16px:

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

Převod REM na PX

Pro převod jednotek REM na pixely vynásobte hodnotu REM velikostí písma kořene:

$PX = REM \times rootFontSize$

Například, při výchozí velikosti písma kořene 16px:

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

Převod EM na PX

Pro převod jednotek EM na pixely vynásobte hodnotu EM velikostí písma nadřazeného prvku:

$PX = EM \times parentFontSize$

Například, při velikosti písma nadřazeného prvku 16px:

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

Převod REM na EM

Pro převod jednotek REM na jednotky EM musíte zohlednit velikost písma kořene i velikost písma nadřazeného prvku:

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

Pokud jsou velikosti písma kořene a nadřazeného prvku stejné (např. 16px), pak 1rem = 1em.

Převod EM na REM

Pro převod jednotek EM na jednotky REM použijte následující vzorec:

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

Opět, pokud jsou obě velikosti písma stejné, pak 1em = 1rem.

Jak používat převodník jednotek PX, REM a EM

Náš nástroj pro převod jednotek usnadňuje překlad hodnot mezi jednotkami PX, REM a EM. Zde je krok za krokem návod, jak efektivně používat převodník:

Základní použití

Zadejte hodnotu do jakéhokoli vstupního pole (PX, REM nebo EM)
Převodník automaticky vypočítá a zobrazí ekvivalentní hodnoty v dalších dvou jednotkách
Upravte velikost písma kořene (výchozí: 16px), abyste viděli, jak to ovlivňuje převody REM
Upravte velikost písma nadřazeného prvku (výchozí: 16px), abyste viděli, jak to ovlivňuje převody EM
Použijte tlačítko kopírovat vedle každého pole pro zkopírování hodnoty do schránky

Pokročilé funkce

Vizualizace srovnání: Nástroj poskytuje vizuální reprezentaci relativních velikostí každé jednotky
Ovládání přesnosti: Všechny výpočty udržují 4 desetinná místa pro přesnost
Negativní hodnoty: Převodník podporuje negativní hodnoty, které jsou platné v CSS pro vlastnosti jako okraje
Aktualizace v reálném čase: Jakákoli změna vstupních hodnot nebo nastavení velikosti písma okamžitě aktualizuje všechny výpočty

Tipy pro přesné převody

Pro nejpřesnější převody REM nastavte velikost písma kořene tak, aby odpovídala hodnotě velikosti písma <html> vašeho projektu
Pro přesné převody EM nastavte velikost písma nadřazeného prvku tak, aby odpovídala velikosti písma nadřazeného prvku, se kterým pracujete
Pamatujte, že výchozí velikosti písma prohlížeče se mohou lišit, ačkoli 16px je nejběžnější výchozí hodnota

Praktické případy použití pro převod CSS jednotek

Pochopení, kdy použít každou CSS jednotku a jak mezi nimi převádět, je klíčové pro efektivní webový vývoj. Zde jsou některé praktické aplikace a scénáře, kde náš převodník prokazuje svou hodnotu:

Responzivní webový design

Převod mezi jednotkami je nezbytný pro vytváření skutečně responzivních návrhů:

Mobilní první přístup: Začněte s základním designem v pixelech, poté převádějte na relativní jednotky pro škálovatelnost
Správa breakpointů: Používejte REM pro konzistentní rozestupy napříč různými velikostmi zobrazení
Škálování komponent: Zajistěte, aby UI prvky udržovaly proporcionální vztahy při změně velikosti zobrazení

1/* Převod pevných pixelových hodnot na responzivní 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

Vylepšení přístupnosti

Použití relativních jednotek zlepšuje přístupnost tím, že respektuje uživatelské preference:

Změna velikosti textu: Když uživatelé změní velikost písma v prohlížeči, rozvržení založená na REM se přizpůsobí
Funkce přiblížení: Relativní jednotky zajišťují, že návrhy zůstávají proporcionální, když uživatelé přiblíží
Respektování uživatelských preferencí: Rozvržení založená na relativních jednotkách ctí výchozí nastavení velikosti písma uživatele

Systémy návrhu založené na komponentách

Moderní systémy návrhu těží z promyšleného používání jednotek:

Konzistentní komponenty: Používejte REM pro globální konzistenci rozestupů a velikostí
Sebestačné moduly: Používejte EM pro prvky, které by se měly škálovat s jejich nadřazenými komponentami
Návrhové tokeny: Převádějte mezi jednotkami při implementaci návrhových tokenů v různých kontextech

Typografické systémy

Vytváření harmonické typografie vyžaduje pečlivý výběr jednotek:

Typografické škály: Definujte typografickou škálu v REM pro konzistentní progresi
Výšky řádků: Používejte bezjednotkové hodnoty nebo EM pro proporcionální výšky řádků
Responzivní text: Upravte velikosti písma napříč breakpointy, zatímco udržujete proporce

1/* Typografický systém používající jednotky 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

Návrhy pixel-perfect

Při implementaci návrhů z nástrojů jako Figma nebo Photoshop:

Předání návrhu: Převádějte pixelové hodnoty z návrhových souborů na REM/EM pro vývoj
Udržení přesnosti: Zajistěte přesné rozestupy a velikosti při používání relativních jednotek
Integrace návrhového systému: Převádějte pixelové návrhové tokeny na relativní jednotky

Alternativní CSS jednotky

I když jsou PX, REM a EM nejběžnějšími jednotkami, existují alternativy, které stojí za zvážení:

Jednotky pohledu (VW, VH)

VW (viewport width): 1vw je rovno 1% šířky viewportu
VH (viewport height): 1vh je rovno 1% výšky viewportu
Případ použití: Vytváření prvků, které se přímo škálují s velikostí viewportu

Procenta (%)

Relativní k rozměrům nadřazeného prvku
Případ použití: Tekutá rozložení a responzivní šířky

CH jednotky

Na základě šířky znaku "0"
Případ použití: Vytváření kontejnerů s konkrétním počtem znaků na řádek

EX jednotky

Na základě výšky malého písmene "x"
Případ použití: Dolaďování typografie, zejména pro úpravy výšky x

Evoluce CSS jednotek ve webovém vývoji

Historie CSS jednotek odráží širší evoluci webového designu, od statických rozvržení po dnešní responzivní, přístupné přístupy.

Raný webový design (1990. léta)

V raných dobách CSS panovaly pixely. Weboví designéři vytvářeli rozvržení s pevnou šířkou, obvykle 640px nebo 800px široká, aby vyhovovala běžným rozlišením obrazovky. Přístupnost a rozmanitost zařízení nebyly hlavními obavami a pixelová přesnost byla primárním cílem.

Vzestup tekutých rozvržení (začátek 2000. let)

Jak se rozměry obrazovek diverzifikovaly, procentuální rozvržení získala na popularitě. Designéři začali vytvářet flexibilnější návrhy, ačkoli typografie často zůstávala v pixelových jednotkách. Toto období přineslo zavedení jednotek EM v CSS, ačkoli jejich přijetí bylo omezené kvůli složitosti správy kaskádových velikostí písma.

Mobilní revoluce (2007-2010)

Zavedení iPhonu v roce 2007 transformovalo webový design. Najednou musely webové stránky fungovat na obrazovkách tak malých jako 320px širokých. To podnítilo zájem o responzivní designové techniky a relativní jednotky. Omezení jednotek EM (zejména kaskádový efekt) se stalo zřejmým, jak se návrhy stávaly složitějšími.

Éra responzivního webového designu (2010-2015)

Ovlivňující článek Ethana Marcottea o responzivním webovém designu z roku 2010 změnil způsob, jakým vývojáři přistupovali k CSS jednotkám. Jednotka REM byla zavedena v CSS3, což nabízelo výhody relativního škálování bez kaskádových komplikací jednotek EM. Podpora prohlížečů pro jednotky REM během tohoto období rostla.

Moderní CSS přístupy (2015-současnost)

Dnešní webový vývoj přijímá mix jednotek pro různé účely:

Jednotky REM pro globální konzistenci a přístupnost
Jednotky EM pro specifické škálování komponent
Pixely pro okraje a malé detaily
Jednotky pohledu pro skutečně responzivní prvky
Funkce CSS calc() pro kombinování různých typů jednotek

Tato evoluce odráží přechod webu od dokumentového média k složitému aplikačnímu platformě, která musí fungovat napříč nesčetnými zařízeními a kontexty.

Kódové příklady pro převod jednotek

JavaScript funkce pro převod jednotek

1// Převod mezi PX, REM a EM jednotkami
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// Příklad použití
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 vlastní vlastnosti pro převod jednotek

1:root {
2  /* Základní velikosti písma */
3  --root-font-size: 16px;
4  --base-font-size: var(--root-font-size);
5  
6  /* Běžné hodnoty pixelů převedené 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/* Příklad použití */
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 pro převod jednotek

1// SCSS funkce pro převod jednotek
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// Příklad použití
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žití velikosti písma nadřazeného prvku (18px) pro převod em
22    padding: px-to-em(16, 18);
23    margin-bottom: px-to-em(24, 18);
24  }
25}
26

Python převodník jednotek

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

Jaký je rozdíl mezi jednotkami REM a EM?

Jednotky REM (root em) jsou relativní k velikosti písma kořenového prvku (typicky elementu <html>), zatímco jednotky EM jsou relativní k velikosti písma jejich nadřazeného prvku. Tento klíčový rozdíl znamená, že jednotky REM udržují konzistentní velikosti v celém dokumentu bez ohledu na vnoření, zatímco jednotky EM mohou vytvářet kumulativní efekt při vnoření prvků.

Která CSS jednotka je nejlepší pro responzivní design?

Neexistuje jediná "nejlepší" jednotka pro všechny situace. Kombinace jednotek je obvykle nejúčinnější:

Jednotky REM pro typografii a konzistentní rozestupy
Jednotky EM pro specifické škálování komponent
Procenta nebo jednotky pohledu pro šířky rozvržení
Pixely pro okraje a malé detaily

Ideální přístup je používat každou jednotku pro to, co dělá nejlépe v rámci soudržného systému.

Proč mají prohlížeče výchozí velikost písma 16px?

Výchozí velikost 16px byla stanovena jako standard čitelnosti, který funguje dobře napříč zařízeními. Výzkum ukázal, že text kolem 16px je optimální pro čtení na obrazovkách při běžných vzdálenostech pohledu. Tento výchozí bod také poskytuje dobrou základnu pro přístupnost, zajišťující, že text není pro většinu uživatelů příliš malý.

Mohu používat negativní hodnoty s těmito jednotkami?

Ano, CSS podporuje negativní hodnoty pro mnoho vlastností pomocí jakéhokoli typu jednotky. Negativní okraje, transformace a pozice jsou běžné případy použití pro negativní hodnoty. Náš převodník správně zpracovává negativní hodnoty pro všechny typy jednotek.

Jak fungují jednotky EM s vnořenými prvky?

Jednotky EM se kumulují, když jsou prvky vnořeny. Napří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 kumulativní efekt může být užitečný pro vytváření proporcionálních návrhů, ale vyžaduje pečlivou správu, aby se předešlo nechtěnému škálování.

Jak se prohlížeče vypořádávají s subpixelovým vykreslováním s relativními jednotkami?

Prohlížeče se s subpixelovými hodnotami vypořádávají různě. Některé prohlížeče zaokrouhlují na nejbližší pixel, zatímco jiné podporují subpixelové vykreslování pro hladší škálování. To může občas způsobit drobné nesrovnalosti napříč prohlížeči, zejména s malými hodnotami REM/EM nebo při používání transformací. Pro většinu případů použití jsou tyto rozdíly zanedbatelné.

Jaký je dopad na výkon používání různých CSS jednotek?

Mezi používáním pixelů, REM nebo EM jednotek v moderních prohlížečích není významný rozdíl v výkonu. Volba jednotek by měla být založena na požadavcích designu, responzivním chování a potřebách přístupnosti spíše než na úvahách o výkonu.

Odkazy a další čtení

"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. května 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/

Vyzkoušejte náš převodník jednotek ještě dnes

Přestaňte se trápit ručními převody CSS jednotek a nechte náš převodník PX, REM a EM udělat práci za vás. Ať už vytváříte responzivní web, vytváříte návrhový systém, nebo se jen učíte o CSS jednotkách, tento nástroj vám ušetří čas a zajistí přesnost. Zadejte své hodnoty nyní a uvidíte, jak snadný může být převod jednotek!

Převodník PX na REM a EM: Kalkulátor CSS jednotek

Převodník jednotek PX, REM a EM

Převodní vzorce

Dokumentace