Tomáš Daněk

• zapisují se ihned za číslo určující množství jednotek
• jako oddělovač desetinných míst se používá tečka
• jednotku není nutné uvádět u hodnoty nula
• hodnota může být jak kladná, tak i záporná
• absolutní jednotka udává přesnou míru
• relativní jednotka se vztahuje k jiné velikosti

Příklad CSS:

div {
  margin: 1.5em 5% -10px 0;
}

Pixel (px)

• obrazovkový bod (každá obrazovka má jinou velikost obrazového bodu) – nejčastěji 96 px na palec
• relativní jednotka
• použití: grafika, (dříve se používalo na Layout a Responsive design)
• nevýhody:
  • uživatelé IE9- si nemohou přizpůsobit velikost textů; IE10 nabízí funkci zoom (funkce je již delší dobu běžná u konkurenčních prohlížečů), která umožňuje měnit velikost stránky jako celku
  • problém s "poloviční velikosti" u Retina displeje

Procenta (%)

• hodnota se počítá z velikosti rodičovského prvku (v nejvyšší úrovni je jím okno prohlížeče)
• relativní jednotka (často zděděná od rodiče)
• použití: texty

• body {font-size: 10px;}
  h1 {font-size: 240%;} /* =24px */

Čtverčík (em)

• šířka velkého písmena M
• hodnota se mění v závislosti na velikosti písma
• relativní jednotka – aktuální velikost může být ovlivněna velikostí nadřazeného prvku a volbou uživatele
• použití: rozvržení (layout) dokumentu a box model
• nevýhody:
  • násobení velikosti u vnořených prvků viz např. How to size text using ems (seznam vnořený do seznamu již nemá velikost 14px ale 20px, další úroveň již má velikost 27px atd. – řešením může být deklarace vnořených prvků na 1em)

  • body {font-size: 10px; /* font-size: 62.5%; */}
    h1 {font-size: 2.4em;} /* =24px */
    p  {font-size: 1.4em;} /* =14px */
    li {font-size: 1.4em;} /* =14px??? */
    li li, li p /* etc */ {font-size: 1em;}

Poznámky:

• prvky v jednotkách em do sebe pokud možno nevnořujte, protože aktuální velikost může být ovlivněna velikostí nadřazeného prvku, volbou uživatele a z důvodu implementační chyby IE6-
• výchozí velikost text v prohlížečích bývá 16px
  • 16px * 0.625 (tj. 62.5%) = 10px
• přepočet px na em
  • child pixels / parent pixels = child ems
    12px / 10px = 1.2em

Root em (rem)

• CSS3 zavádí několik nových jednotek, mezi které patří i jednotka rem
• relativní jednotka – rem jednotka je relativní vůči kořenu dokumentu nebo html elementu (umožňuje definovat jednu velikost a z ní odvozovat další požadované velikosti)
• použití: texty
• nevýhoda: rem jednotka není podporována v Media queries u prohlížeče Chrome (Media queries with rem units in Chrome) 
• podpora: IE9+, Safari 5+, Chrome, Firefox 3.6+ (Opera ani ve verzi 11.10 zatím rem nepodporuje)
  • pro prohlížeče bez podpory rem je vhodné nejprve definovat velikost v jednotkách, které prohlížeč podporuje např. px nebo používat procenta 

• html {font-size: 10px; font-family: sans-serif; /* font-size: 62.5%; */}
  body {
    font-size: 16px; /* IE8 */
    font-size: 1.6rem; /* =16px, =12pt */
  }
  h1 {
    font-size: 24px;
    font-size: 2.4rem; /* =24px */
  }

• poznámky
  • 768px = 60em (80% font-size sans-serif) ~ max-width page width resolution 800x600px
  • 30-80 znaků na řádek

Typografický bod (pt)

• hodnota je odvozena od anglického palce
• 1 pt = 72 in (často se používá 300 pt na palec)
• absolutní jednotka
• použití: tisk

Ex (ex)

• výška malého písmena x
• hodnota se mění v závislosti na velikosti písma
• relativní jednotka – aktuální velikost může být ovlivněna velikostí nadřazeného prvku a volbou uživatele

Centimetr (cm)

• 1 cm = 10 mm
• absolutní jednotka

Poznámka: vzhledem k různým rozlišením obrazovky funguje spolehlivě snad jen při tisku.

Milimetr (mm)

• 1 mm = 3.78 px
• absolutní jednotka

Poznámka: vzhledem k různým rozlišením obrazovky funguje spolehlivě snad jen při tisku.

Palec (in)

• 1 in = 2,54 cm, 1 in = 96 px
• absolutní jednotka

Poznámka: vzhledem k různým rozlišením obrazovky funguje spolehlivě snad jen při tisku.

Pica nebo též cicero (pc)

• 1 pc = 12 pt, 1 pc = 1/6 in, 1 pc = 16 px
• absolutní jednotka

Poznámka: vzhledem k různým rozlišením obrazovky funguje spolehlivě snad jen při tisku.