Mentre configurem la mida de qualsevol element en CSS, tenim dues opcions. El primer són unitats absolutes i l'altre són unitats relatives. Les unitats absolutes són fixes i no relatives a cap altra cosa. Sempre són idèntics en qualsevol cas. Implica cm, mm, px, etc. D'altra banda, les unitats relatives són relatives a una altra cosa. Pot ser la mida de l'element principal o la mida de l'HTML principal. Les unitats relatives cobreixen em, rem, vw, vh, etc. Són unitats escalables i ajuden en el disseny responsive. Molts de nosaltres ens podríem confondre entre les unitats relatives, especialment les en i la rem unitats. Desglossem la diferència entre aquests dos. Bàsicament, tant rem com em són unitats de mida escalables i relatives, però amb em, la unitat és relativa a la mida de la lletra del seu element pare, mentre que la unitat rem només és relativa a la mida de la lletra arrel del document HTML. La r in rem significa arrel.

Entenem-los tots dos en detall.

1. em Unit: La unitat em permet establir la mida de la lletra d'un element en relació amb la mida de la lletra del seu pare. Quan la mida de l'element principal canvia, la mida de l'element secundari canvia automàticament.

Nota: quan s'utilitzen unitats em a la propietat font-size, la mida és relativa a la mida de font del pare. Quan s'utilitza en altres propietats, és relativa a la mida del tipus de lletra d'aquest element. Aquí, només la primera declaració pren la referència del pare.

• La mida de font de l'element .child serà 40 píxels (2*20 píxels).
• El marge de .child serà 60 píxels . Això és 1,5 vegades la mida del tipus de lletra del nostre element (1,5 * 40px).

Exemple: Aquest exemple mostra l'ús de la unitat em en CSS .

HTML

fitxer de canvi de linux