Jednotky

  • 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 Chromeno
  • 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 enlightened
  • 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.