Převodník CSS jednotek

Převodník CSS jednotek - kalkulačka px, rem, em, %

🎨 Převádějte mezi CSS jednotkami: pixely (px), rem, em, procenty (%), body (pt) a jednotkami viewportu (vw, vh). Základní nástroj pro responzivní webový design a vývoj.

Typy CSS jednotek

• Absolutní jednotky: px, pt, cm, mm, in – pevná velikost bez ohledu na kontext
• Relativní jednotky: rem, em, %, vw, vh – škálují se podle rodiče nebo viewportu
• Jednotky závislé na písmu: rem, em, ch, ex – podle velikosti písma
• Jednotky závislé na viewportu: vw, vh, vmin, vmax – podle rozměrů viewportu

Vysvětlení jednotek

• px (pixely): 1px = 1 pixel zařízení. Absolutní jednotka, přesná, ale neškáluje se.
• rem: Relativní ke kořenovému prvku (html). 1rem = 16px ve výchozím nastavení.
• em: Relativní k velikosti písma rodiče. U vnořených prvků se může násobit.
• %: Relativní k vlastnosti rodičovského prvku. 100% = stejné jako u rodiče.
• pt (body): Tisková jednotka. 1pt = 1/72 palce ≈ 1,333px.
• vw: 1vw = 1% šířky viewportu. 100vw = plná šířka.
• vh: 1vh = 1% výšky viewportu. 100vh = plná výška.

Běžné převody

• 1rem = 16px (výchozí nastavení prohlížeče)
• 1em = 16px (pokud má rodič 16px)
• 100% = velikost rodičovského prvku
• 12pt = 16px (běžné v tisku)
• 1vw = 19,2px (na viewportu 1920px)

Metoda 62,5 %

Nastavte html { font-size: 62.5%; } aby 1rem = 10px. Usnadní to výpočty: 1.6rem = 16px, 2.4rem = 24px atd.

Doporučení pro přístupnost

• Používejte rem pro písma: respektuje uživatelské preference velikosti písma
• Vyhněte se px pro písma: neškáluje se s nastavením uživatele
• Používejte relativní jednotky: zlepšuje dostupnost při zoomu/zvětšení
• Testujte různé velikosti: ověřte při 200% zoomu a nastavení velkého textu

Responzivní design

Používejte rem pro media queries: @media (min-width: 48rem) místo 768px. Tím zajistíte, že breakpointy se budou škálovat podle uživatelských preferencí velikosti písma.

💡 Tip pro profesionály: Moderní best practice je používat rem pro většinu velikostí (písma, rozestupy, breakpointy), px pro okraje a jemné detaily a % nebo jednotky viewportu pro layouty. Nepoužívejte em pro rozestupy, protože se může nečekaně násobit.