¿Qué diferencia hay entre em y rem en CSS?

En CSS, em y rem son unidades de medida de longitud que se utilizan para especificar tamaños de fuente, espaciado y otros valores relacionados con el diseño de la página web.

La diferencia principal entre em y rem es que em se basa en el tamaño de fuente del elemento padre, mientras que rem se basa en el tamaño de fuente del elemento raíz (normalmente el html).

En otras palabras, si se define un tamaño de fuente para un elemento utilizando em, el tamaño de fuente será relativo al tamaño de fuente del elemento padre. Por ejemplo, si el tamaño de fuente del elemento padre es de 16px y se establece un tamaño de fuente de 2em para un elemento secundario, el tamaño de fuente del elemento secundario será de 32px (2 x 16px).

Por otro lado, si se utiliza rem para establecer el tamaño de fuente de un elemento, el tamaño de fuente será relativo al tamaño de fuente del elemento raíz (html). Por ejemplo, si el tamaño de fuente del elemento raíz es de 16px y se establece un tamaño de fuente de 2rem para un elemento secundario, el tamaño de fuente del elemento secundario será de 32px (2 x 16px).

En resumen, em se basa en el tamaño de fuente del elemento padre, mientras que rem se basa en el tamaño de fuente del elemento raíz. En general, se recomienda el uso de rem para establecer tamaños de fuente y espaciados, ya que se asegura de que los valores sean más predecibles y estables en diferentes situaciones de diseño.

¿Qué sígnifica VW en CSS?

VW es otra unidad de medida de longitud en CSS, que significa «viewport width» (ancho del área de visualización). Se utiliza para especificar un valor de tamaño relativo al ancho de la ventana del navegador.

Por ejemplo, si se establece un ancho de 50vw para un elemento, su ancho será el 50% del ancho de la ventana del navegador. Si la ventana del navegador tiene un ancho de 1000px, entonces el ancho del elemento será de 500px (50% de 1000px).

VW es útil para crear diseños adaptables que se ajustan automáticamente al tamaño de la ventana del navegador, lo que garantiza una experiencia de usuario coherente en diferentes dispositivos y tamaños de pantalla.

Es importante tener en cuenta que vw se basa en el ancho de la ventana del navegador y no en el ancho del contenedor padre, lo que significa que puede ser un poco difícil de controlar en algunos casos. Además, en algunos dispositivos móviles, la barra de navegación y la barra de estado pueden afectar el ancho del área de visualización, lo que puede tener un impacto en cómo se visualizan los elementos que utilizan vw.

¿Cuándo usar cada unidad de medida en CSS?

Unidad de medida Significado Uso recomendado
em Tamaño relativo al tamaño de fuente del elemento padre Tamaños de fuente y espaciado dentro de un contenedor que necesita escalar proporcionalmente con su contenedor.
rem Tamaño relativo al tamaño de fuente del elemento raíz (html) Tamaños de fuente y espaciado que no dependen del tamaño de fuente del elemento padre y que deben ser más estables en diferentes situaciones de diseño.
vw Tamaño relativo al ancho de la ventana del navegador Tamaños de ancho que deben ser sensibles al tamaño de la ventana del navegador y ajustarse automáticamente a diferentes dispositivos y tamaños de pantalla.

¿Hay más unidades de medida en css?

Algunas de las unidades de medida más comunes en CSS:

  • px: Píxeles. Una unidad de medida de longitud absoluta que representa un solo píxel en la pantalla. Es una de las unidades de medida más comunes y se utiliza a menudo para establecer tamaños de fuente y espaciado precisos.
  • cm, mm, in, pt, pc: Estas son unidades de medida absolutas que se utilizan para medir longitudes físicas en papel y otros medios impresos. No se recomiendan para su uso en la web, ya que no escalan con el tamaño de la pantalla.
  • %: Porcentaje. Una unidad de medida relativa que se utiliza para establecer tamaños y posiciones en relación al tamaño del contenedor padre. Por ejemplo, establecer un ancho del 50% en un elemento lo hará tener la mitad del ancho del contenedor padre.
  • ex: Tamaño relativo a la altura de la letra «x» en el tamaño de fuente actual. Esta unidad se utiliza a menudo para establecer tamaños de altura en relación a la altura de la letra «x» en lugar de la altura total del texto.
  • ch: Tamaño relativo a la anchura de la letra «0» en el tamaño de fuente actual. Esta unidad se utiliza a menudo para establecer tamaños de ancho en relación a la anchura de la letra «0» en lugar de la anchura total del texto.
  • pt: Puntos tipográficos. Una unidad de medida absoluta que se utiliza comúnmente en diseño gráfico y tipografía. Un punto tipográfico es aproximadamente 1/72 de una pulgada y se utiliza a menudo para establecer tamaños de fuente precisos.

Hay que tener en cuenta que cada unidad de medida tiene sus propias ventajas y desventajas, y la elección de una u otra dependerá del tipo de diseño que se esté realizando y del resultado deseado.

Unidades de medida relativas y unidades de medida absolutas

Unidades de medida relativas Unidades de medida absolutas
em cm
rem mm
vw in
% pt
ex pc
ch px