Al configurar el tamaño de cualquier elemento en CSS, tenemos dos opciones. El primero son unidades absolutas y el otro son unidades relativas. Las unidades absolutas son fijas y no relativas a nada más. Son siempre idénticos en cualquier caso. Implican cm, mm, px, etc. Por otro lado, las unidades relativas son relativas a otra cosa. Puede ser el tamaño del elemento principal o el tamaño del HTML principal. Las unidades relativas cubren em, rem, vw, vh, etc. Estas son unidades escalables y ayudan en el diseño receptivo. Muchos de nosotros podemos confundirnos entre las unidades relativas, especialmente el em y el rem .unidades. Analicemos la diferencia entre esos dos. Básicamente, tanto rem como em son unidades de tamaño escalables y relativas, pero con em, la unidad es relativa al tamaño de fuente de su elemento principal, mientras que la unidad rem es solo relativa al tamaño de fuente raíz del documento HTML. La “r” in rem significa “raíz”.
Vamos a entender ambos en detalle.
1. Unidad em: La unidad em permite configurar el tamaño de fuente de un elemento en relación con el tamaño de fuente de su padre. Cuando cambia el tamaño del elemento principal, el tamaño del elemento secundario cambia automáticamente.
Nota: Cuando se utilizan unidades em en la propiedad de tamaño de fuente, el tamaño es relativo al tamaño de fuente del padre. Cuando se usa en otras propiedades, es relativo al tamaño de fuente de ese elemento en sí. Aquí, solo la primera declaración toma la referencia del padre.
- El tamaño de fuente del elemento .child será 40px (2*20px).
- El margen de .child será de 60px . Eso es 1,5 veces el tamaño de fuente de nuestro elemento (1,5*40 px).
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Em vs Rem</title>
</head>
<style>
.parent {
font-size: 20px;
}
.child-em {
font-size: 2em;
margin: 1.5em;
}
</style>
<body>
<div class="parent">
This is parent
<div class="child-em">
This is Child in em unit system
</div>
</div>
</body>
</html>
Producción:
unidad em
2. Unidad rem: El rem se basa en el valor del tamaño de fuente del elemento raíz, que es el elemento <html>. Y si el elemento <html> no tiene un tamaño de fuente específico, se usa el valor predeterminado del navegador de 16px. Así que aquí solo se considera el valor de la raíz y no hay relación con un elemento padre.
A diferencia de em, aquí el tamaño es relativo para todas las declaraciones, no solo para la primera. Entendamos esto con nuestro ejemplo anterior.
- El tamaño de fuente del elemento .child será de 60 px (2*30 px).
- El margen de .child será de 45px . Eso es 1,5 veces el tamaño de fuente del elemento html (1,5*30 px).
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Em vs Rem</title>
</head>
<style>
html {
font-size: 30px;
}
.parent {
font-size: 20px;
}
.child-rem {
font-size: 2rem;
margin: 1.5rem;
}
</style>
<body>
<div class="parent">
This is parent
<div class="child-rem">
This is Child in rem unit system
</div>
</div>
</body>
</html>
Producción:
unidad rem
La diferencia entre la unidad em y rem se da a continuación:
| Parámetro |
ellos |
movimiento rápido del ojo |
|---|---|---|
| Relatividad | em es relativo al tamaño de fuente de su padre directo o más cercano | rem es relativo al tamaño de fuente HTML (raíz) |
| efecto compuesto | Puede conducir a un efecto combinado | No conduce a un efecto combinado. |
Espero que tengas una diferencia clara entre las unidades em y rem. Es muy fácil de recordar, r in rem indica raíz, es relativa a la raíz (HTML) y em es relativa al padre.