Základy CSS

Jednotky

Velikost písma, šířka, mezery: všechno potřebuje číslo a jednotku. Každá jednotka se k něčemu vztahuje.

Projdeme šest nejpoužívanějších: px, %, em, rem, vh a ch. V náhledu vidíte, kam se dostaneme.

Jednotka · 1

Pixely px

Pevná velikost, nezávislá na okolí. Nadpis bude mít 40 pixelů všude, ať je kdekoli.

Mezi číslem a jednotkou nesmí být mezera: 40px, ne 40 px. Jedinou výjimkou je nula, ta jednotku nepotřebuje.

Jednotka · 2

Procenta %

Procenta se vztahují k rodiči. Pruh obsazenosti má šířku 60 % svého wrapperu .bar. Když se wrapper zúží, zúží se i pruh.

Zkuste přepnout náhled na mobil: pruh má pořád 60 % šířky.

Jednotka · 3

em: podle vlastního písma

1 em je velikost písma daného elementu. Obě tlačítka mají stejné pravidlo s paddingem v em, ale menší tlačítko má menší písmo, a tak má i menší padding.

Ideální pro padding tlačítek a štítků: změníte jen velikost písma a zbytek se přizpůsobí sám.

Jednotka · 4

rem: podle kořene stránky

1 rem je velikost písma elementu html, v prohlížeči obvykle 16 px. Všechny velikosti písma přepíšeme z pixelů do rem.

2,5 × 16 = 40 px, v náhledu se nic nezměnilo. Výhoda se ukáže v kroku 8. A když si uživatel zvětší písmo v nastavení prohlížeče, rem se zvětší s ním, pixely ne.

Jednotka · 5

vh: podle výšky okna

1 vh je jedno procento výšky okna prohlížeče. Hero sekce bude vysoká nejméně 60 % okna, ať je okno jakékoli.

Podobně vw je jedno procento šířky okna.

Jednotka · 6

ch: podle šířky znaku

1 ch je zhruba šířka jednoho znaku. Hodí se pro šířku textu: řádek o 45 až 75 znacích se čte nejlépe.

Responzivita

Jeden řádek zmenší celou stránku

Na telefonu je nadpis zbytečně velký. Díky rem nemusíme přepisovat každé pravidlo: stačí zmenšit písmo elementu html.

Zmenšily se všechny velikosti v rem a s nimi i padding tlačítek v em. Border pruhu v px zůstal stejný, a to je dobře.

Shrnutí

Kterou jednotku kdy

• rem pro velikost písma
• em pro padding tlačítek a štítků
• % pro šířku vůči rodiči
• ch pro šířku textu
• vh a vw pro bloky podle velikosti okna
• px pro bordery a drobné detaily

Jednotky jde i sčítat a kombinovat, například calc(100% - 2rem). To je v lekci o výpočtech.

Další: Barvy →