A new IS hope: CSS gestió dels tamanys: em, px, percentatge,....

domingo, 1 de abril de 2012

CSS gestió dels tamanys: em, px, percentatge,....

Com gestionar el tamany del estil es un tema que sempre dona problemes. Aqui el resum de les consultes que he fet:
Les unitats relatives són: em, ex,%
EM: la propietat 'font-size de la font corresponent.
La unitat 'em' és igual al valor calculat de la propietat font-size de l'element en el qual s'utilitza.
Si la mida de lletra del document és 12 punts, 1em és igual a 12 punts.

EX: La "ex" es defineix per unitat de primera font disponible de l'element.
La 'x-height' es diu així perquè sovint és igual a l'altura de la minúscula "x" (fins i tot per les fonts que no contenen una "x").
Quan s'especifica per a l'arrel de l'arbre del document (per exemple, "HTML" en HTML), 'em' i 'ex' fan referència al valor inicial de la propietat. Els elements fills hereten els valors computats.

Exemple: 'text-indent' valor de "H1" elements seran 36px, no 45px.

body {
  font-size: 12px;
  text-indent: 3em;  /* i.e., 36px */
}
h1 { font-size: 15px }

% Percentatge:
Els elements fills hereten els valors computats.

Quina és la diferència entre EM i percentatge?
En realitat em i percentatge haurien de ser iguals però a la pràctica el percentatge escala millor que em.
Anem a veure el que passa quan s'augmenta la mida de la font base (utilitzant el cos selector CSS) del 100% al 120%. (extret de http://kyleschaeffer.com/)