Unitats

Unitats absolutes i relatives

Oblidem-nos del cm i donem la benvinguda als píxels.

El píxel (px) és cadascun dels punts d’una pantalla. A quants cm correspon? És impossible fer una equivalència, perquè cada pantalla pot tenir més o menys píxels (un ordinador de sobretaula, un portàtil, un mòbil..) o tenir-los més o menys separats (un ordinador vs. un projector).

Ja hem vist quines unitats podem fer servir per modificar el color, ara veurem quines unitats podem fer servir per modificar les dimensions (amplades, alçades, marges, tipografia,…).

Començarem per modificar la mida del text. Aquesta propietat s’anomena font-size i podem fer servir diferents unitats de mesura:

• píxels
• em
• rem

Què és un em?

El «em» és una unitat de mesura relativa a una altra mesura. És un concepte, en realitat, poc digital. Ve de la impremta! La M, a les tipografies per impressió es fa servir per donar informació sobre les altres lletres d’una mateixa tipografia. Si prenem la lletra M de referència podem dir coses com: «la lletra «a» minúscula ocupa la meitat que una «M», la «a» ocupa 0.5 emes».

Aquesta unitat es fa servir al CSS per indicar una dimensió en relació a la mida de la tipografia.

Per exemple: el marge per sota dels h1 serà de 1 em.

h1{
  margin-bottom: 1em;
}

A quants píxels correspondrà aquest 1 em? Dependrà de la mida de la tipografia dels h1. Si els h1 fan són de 32px, 1em seran exactament 32px. Però si els h1 fan 40px, aleshores 1em seran 40px.

En realitat, el navegador fa servir l'»em» de sèrie. Per això, si canviem el font-size d’un element (paràgrafs, per exemple), els marge inferior creix o decreix proporcionalment.

Què és un rem?

Un rem és una unitat relativa, però no relativa a la tipografia del propi element, sinó amb la tipografia de l’arrel del document (root).

Per defecte, el navegador estableix la mida de text base (la de l’arrel) en 16px. A partir d’aquest valor, calcula la resta d’elements:

• Els paràgrafs mesuren 1rem (16px)
• Els h1 i h2 mesuren 2rem (32px)
• Els h3 mesures 1.5rem (24px)
• Els h4 mesures 1.25rem(20px)

Aquestes mides poden canviar si l’usuari modifica la configuració del seu navegador. Per exemple, algú amb molt mala visió pot canviar la mida de text base a 30px. Si fa això, automàticament tots els elements de la pàgina canvien de manera proporcional. I com que les mides dels elements canvien, també canvia tot allò definit en proporció a la mida de cada element (marges, padding,..)

Com modifiquem la mida de text base amb CSS?

Amb CSS podem modificar la mida de text base, fent una regla amb el selector html i donant un valor a la propietat font-size:

html{
   font-size: 24px; 
}

Quins avantatges té treballar amb unitats relatives?

Les unitats relatives permeten plantejar el CSS com un sistema. Si definim una mida de text base i definim la mida de qualsevol element en rem, podrem amplicari reduir la mida de la tipografia canviant un únic valor.

• Això serà pràctic i ens permetrà anar més ràpid fent modificacions
• La nostra pàgina web serà més accessible, ja que si l’usuari augmenta la tipografia, tot creixerà en proporció.

Altres unitats de mesura: el percentatge

En molts casos, sobretot quan maquetem i distribuim elements a dreta i esquerra, haurem de definir les dimensions fent servir el percentatge (%). Per exemple, podrem fer files amb 4 columnes, on cadascuna ocupi el 25% de l’amplada.