Grafik digitálnych médií

• zapisujú sa ihneď za číslo určujúce množstvo jednotiek
• ako oddeľovač desatinných miest sa používa bodka
• jednotku nie je nutné uvádzať pri hodnote nula
• hodnota môže byť ako kladná, tak aj záporná
• absolútna jednotka udáva presnú mieru
• relatívna jednotka sa vzťahuje k inej veľkosti

Príklad CSS:

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

Pixel (px)

• obrazovkový bod (každá obrazovka má inú veľkosť obrazového bodu) – najčastejšie 96 px na palec
• relatívna jednotka
• použitie : grafika, (predtým sa používalo na Layout a Responsive design)
• nevýhody :
  • používatelia IE9- si nemôžu prispôsobiť veľkosť textov; IE10 ponúka funkciu zoom (funkcia je už dlhšiu dobu bežná u konkurenčných prehliadačov), ktorá umožňuje meniť veľkosť stránky ako celku
  • problém s „polovičnej veľkosti“ u Retina displeja

Percentá (%)

• hodnota sa počíta z veľkosti rodičovského prvku (v najvyššej úrovni je ním okno prehliadača)
• relatívna jednotka (často zdedená od rodiča)
• použitie : texty

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

Štvorčík (em)

• šírka veľkého písmena M
• hodnota sa mení v závislosti od veľkosti písma
• relatívna jednotka – aktuálna veľkosť môže byť ovplyvnená veľkosťou nadradeného prvku a voľbou užívateľa
• použitie : rozvrhnutie (layout) dokumentu a box model
• nevýhody :
  • násobenie veľkosti pri vnorených prvkoch viď napr. How to size text using ems (zoznam vnorený do zoznamu už nemá veľkosť 14px ale 20px, ďalšia úroveň už má veľkosť 27px atď. – riešením môže byť deklarácia vnorených prvkov na 1em)

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

Poznámky :

• prvky v jednotkách em do seba pokiaľ možno nevnárajte, pretože aktuálna veľkosť môže byť ovplyvnená veľkosťou nadradeného prvku, voľbou užívateľa a z dôvodu implementačnej chyby IE6-
• predvolená veľkosť text v prehliadačoch býva 16px
  • 16px * 0.625 (tj 62.5%) = 10px
• prepočet px na em
  • child pixels / parent pixels = child ems
    12px / 10px = 1.2em

Root em (rem)

• CSS3 zavádza niekoľko nových jednotiek, medzi ktoré patrí aj jednotka rem
• relatívna jednotka – rem jednotka je relatívna voči koreňu dokumentu alebo html elementu (umožňuje definovať jednu veľkosť a z nej odvodzovať ďalšie požadované veľkosti)
• použitie : texty
• nevýhoda : rem jednotka nie je podporovaná v Media queries pri prehliadači Chrome ( Media queries with rem units in Chrome) 
• podpora: IE9+, Safari 5+, Chrome, Firefox 3.6+ (Opera ani vo verzii 11.10 zatiaľ rem nepodporuje)
  • pre prehliadače bez podpory rem je vhodné najprv definovať veľkosť v jednotkách, ktoré prehliadač podporuje napr. px alebo používať percentá 

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

• poznámky
  • 768px = 60m (80% font-size sans-serif) ~ max-width page width resolution 800x600px
  • 30-80 znakov na riadok

Typografický bod (pt)

• hodnota je odvodená od anglického palca
• 1 pt = 72 in (často sa používa 300 pt na palec)
• absolútna jednotka
• použitie : tlač

Ex (ex)

• výška malého písmena x
• hodnota sa mení v závislosti od veľkosti písma
• relatívna jednotka – aktuálna veľkosť môže byť ovplyvnená veľkosťou nadradeného prvku a voľbou užívateľa

Centimeter (cm)

• 1 cm = 10 mm
• absolútna jednotka

Poznámka : vzhľadom na rôzne rozlíšenia obrazovky funguje spoľahlivo snáď len pri tlači.

Milimeter (mm)

• 1 mm = 3.78 px
• absolútna jednotka

Poznámka : vzhľadom na rôzne rozlíšenia obrazovky funguje spoľahlivo snáď len pri tlači.

Palec (in)

• 1 in = 2,54 cm, 1 in = 96 px
• absolútna jednotka

Poznámka : vzhľadom na rôzne rozlíšenia obrazovky funguje spoľahlivo snáď len pri tlači.

Pica alebo tiež cicero (pc)

• 1 pc = 12 pt, 1 pc = 1/6 in, 1 pc = 16 px
• absolútna jednotka

Poznámka : vzhľadom na rôzne rozlíšenia obrazovky funguje spoľahlivo snáď len pri tlači.