Quan s'han d'especificar el marge que es vol entre dos elements, el tamany de la lletra, la grandària d'un element, ... cal especificar les unitats en que es vol especificar: no és el mateix indicar que l'amplada són 3 cm o 3 píxels. En CSS es defineixen dos grans grups d'unitats, unitats relatives i unitats absolutes.
Unitats absolutes
Les unitats absolutes són aquelles que mantenen sempre la mateixa aparença: independentment del dispositiu que s'estigui utilitzant. Així, per exemple, si defineix que una imatge té una amplada de 10 cm i una altura de 7 cm, la visualització de la imatge serà sempre de 10x7 (cm) independentment del dispositiu en el qual estigui visualitzant la plana. Algunes de les unitats absolutes més utilitzades són:
| Unit | Description |
|---|---|
| cm | centímetres |
| mm | mil·límetres |
| px | píxels |
| in | inches |
| pt | points |
| pc | picas |
Font: https://www.w3schools.com/cssref/css_units.asp
S'han marcat en negreta les unitats absolutes que normalment s'utilitzen en les planes web.
Unitats relatives
Les unitats relatives són aquelles que estan relacionades amb la dimensió d'una altre element.
| Unit | Description |
|---|---|
| em | Relatiu a l'amplada de la lletra M de la font actualment definida |
| ex | Relatiu a l'altura de la lletra X de la font actualment definida |
| ch | Relatiua l'amplada del númer to width of the "0" (zero) |
| rem | Relatiu al tamany de la lletra de l'element root |
| % | Relatiu a la dimensió de l'element pare |
| vw | Relatiu al 1% de l'amplada de la finestra de visualització o àrea disponible per a la vistualització (viewport) |
| vh | Relatiu al 1% de l'altura de la finestra de visualització o àrea disponible per a la vistualització (viewport) |
Font: https://www.w3schools.com/cssref/css_units.asp
Utilització de percentatges
Quan utilitzem percentatges s'indica que l'element en el qual definim l'amplada o altura ocuparà un determinat espai relacionat amb el percentatge pare. Aquesta relació ens obliga a donar una mida determinada a l'element pare. Utilitzem un exemple per a explicar el funcionament dels percentatges.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estils/main.css" />
<title>CSS</title>
</head>
<body>
<main>
<!-- Here goes the main content of our web page -->
</main>
</body>
</html>
L'element pare de l'etiqueta main és body . Per tant, caldrà donar unes dimensions a aquest element per tal que els percentatges funcionin de forma correcte. Si utilitzem percentatges per a indicar la mida de l'element body, estem també obligats a especificar quina és la mida del seu element pare, en aquest cas l'etiqueta html . L'etiqueta html és el node arrel del nostre arbre d'etiquetes: no té cap element pare i, per tant, la seva referència serà l'espai de visualització disponible per a la plana web. En altres paraules, si indiquem que l'etiqueta html ha d'ocupar el 100% , aquest ocuparà tot l'espai disponible.
* { margin: 0;padding: 0;} /* Eliminar margin i padding de tots els elements */
html {width:100%; height:100%; background-color: #0F0; } /* Ocupa tot l'espai disponible i pinta'm de color verd cantant */
Un cop s'ha definit l'espai que ocuparà l'element pare, podem definir quin espai ocuparà l'element fill. Així , per exemple, si defineixo que l'element fill ha d'ocupar el mateix espai que l'element pare, tornaré a indicar que l'amplada i l'altura de l'element serà el 100% de l'espai ocupat pel pare.
Suposem que volem que l'àrea de l'element body sigui una quarta part de la que ocupa l'element html. Per aconseguir-ho, hem de definir l'altura i l'amplada de l'element body a la meitat de l'element del seu pare: l'element html .
Si volem que l'àrea de l'element main sigui la mateixa que la de l'element html hem de definir l'amplada i l'altura d'aquest element al doble del tamany del body, ja que aquest és la meitat de l'element html
Si reduim l'àrea a la meitat de l'àrea de l'element body simplement hem d'indicar com a valors de height i width un 50%. Aquest 50% és en relació a l'etiqueta body no html.
vw, vh
vw i vh són unitats que es defineixen en relació al tamany de la finestra o àrea disponible per a la vistualització (viewport). Podem utilitzar aquestes unitats quan volem realitzar planes web responsive i ens sigui difícil l'utilització de percentatges.
En relació a aquestes unitats cal tenir en compte que:
100vw = 100% de l'amplada disponible 1vw = 1% de l'amplada disponible
Com hem vist en l'apartat relacionat amb els percentatges, aquests sempre feien referència a l'element pare a l'element que s'aplica el percentatge. En el cas de les unitats vw i vh aquestes sempre fan referència al "viewport" i, per tant, no precisen definir tamany per a cap element pare.
Utilitzem un exemple per a explicar el seu funcionament.
Exemple
Fitxer .html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estils/main.css" />
<title>CSS</title>
</head>
<body>
<main>
<!-- Here goes the main content of our web page -->
<p>Here is some text</p>
</main>
</body>
</html>
En el primer cas associem a l'etiqueta main el 100% de les dimensions disponibles de la finestra. Com era d'esperar, aquesta etiqueta ocuparà tot l'espai disponible. A diferència del cas anterior, no ha estat necessari aplicar dimensions ni a l'element body ni a l'element html .
En el segon cas, hem aplicat una amplada i una altura del 75% a l'element main i d'un 50% a l'element p . Donat que el "percentatge" és en relació al "viewport", la mida de l'element p és una quarta part de la mida del "viewport" i no una quarta part de la mida del seu fill.
