Middle+

V čem se liší rem od em?

sobes.tech AI

Odpověď od AI

rem a em jsou relativní jednotky měření v CSS, které se používají k určení rozměrů, ale liší se v základní referenční hodnotě.

em — relativní jednotka založená na velikosti písma rodičovského prvku. Například, pokud je velikost písma rodiče: 16px, pak 1em = 16px. Pokud je v potomkovi velikost písma: 1.5em, jeho velikost bude 24px.
rem — relativní jednotka založená na velikosti písma kořenového prvku (obvykle <html>). Například, pokud <html> má velikost písma: 16px, pak 1rem je vždy rovno 16px, bez ohledu na vnoření.

Hlavní rozdíl:

em závisí na kontextu (na rodičovském prvku), což může vést ke kaskádovému násobení velikostí při vnoření.
rem je vždy pevné vzhledem ke kořeni, což usnadňuje správu velikostí a činí je předvídatelnějšími.

Příklad:

html {
  font-size: 16px;
}

.parent {
  font-size: 20px; /* 1em = 20px uvnitř .parent */
}

.child-em {
  font-size: 1.5em; /* 1.5 * 20px = 30px */
}

.child-rem {
  font-size: 1.5rem; /* 1.5 * 16px = 24px */
}

Používejte rem pro globální rozměry, abyste předešli neočekávaným změnám, a em, když chcete škálovat vzhledem k místnímu kontextu.

Předchozí Další