Explicación de las unidades CSS

Introducción

CSS tiene varias opciones para las unidades que se deben usar al determinar el tamaño de varias propiedades CSS. Conocer todas las opciones de unidades CSS puede ser clave para diseñar de una manera que sea fácil de administrar y que se vea bien en cualquier pantalla.

¿Qué es una unidad CSS?

Una unidad CSS determina el tamaño de una propiedad que estás configurando para un elemento o su contenido. Por ejemplo, si quisieras configurar la propiedad marginde un párrafo, le darías un valor específico. Este valor incluye la unidad CSS.

Veamos un pequeño ejemplo:

p {  margin: 20px;}

En este caso, margines la propiedad, 20px;es el valor y px(o “píxel”) es la unidad CSS.

Si bien es común ver unidades pxusadas, la gran pregunta suele ser: "¿Cuál es la mejor unidad para usar aquí?"

A continuación se presentan algunas consideraciones a tener en cuenta al elegir un tipo de unidad y ejemplos de casos de uso:

Unidades absolutas y relativas

Al considerar todas las opciones de unidades a utilizar, es importante tener en cuenta las dos categorías de unidades: absolutas y relativas.

Unidades absolutas

Las unidades que son "absolutas" tienen el mismo tamaño independientemente del elemento principal o del tamaño de la ventana. Esto significa que una propiedad configurada con un valor que tiene una unidad absoluta tendrá ese tamaño cuando se la mire en un teléfono o en un monitor grande (¡y en cualquier otro lugar intermedio!).

Las unidades absolutas pueden resultar útiles cuando se trabaja en un proyecto en el que no se tiene en cuenta la capacidad de respuesta. Por ejemplo, las aplicaciones de escritorio que no se pueden redimensionar se pueden diseñar para las dimensiones predeterminadas. Si la ventana no se puede escalar, tampoco es necesario que el contenido lo haga.

Sugerencia: Las unidades absolutas pueden ser menos favorables para los sitios responsivos porque no se escalan cuando cambia el tamaño de la pantalla.

Los píxeles ( px) suelen ser la unidad absoluta más popular para las pantallas. Los centímetros, milímetros y pulgadas son más comunes para la impresión y es posible que ni siquiera supieras que existían.

Unidades relativas

Las unidades relativas son útiles para diseñar sitios responsivos porque se escalan en relación con el tamaño de la ventana o del elemento principal (según la unidad).

Como regla general, las unidades relativas se pueden utilizar como predeterminadas para los sitios adaptables. Esto puede ayudarle a evitar tener que actualizar los estilos para distintos tamaños de pantalla.

Las unidades relativas pueden ser un poco más difíciles que las absolutas a la hora de determinar cuál usar, así que veamos tus opciones en detalle.

No siempre está claro cuál de estas opciones es mejor utilizar para cada tipo de propiedad CSS. Por ejemplo, %suele ser más apropiado para propiedades relacionadas con el diseño como widthque para font-size.

A continuación se muestran algunos ejemplos de cuándo utilizaría cada unidad relativa.

• %:Quieres que un elemento secundario tenga el 10 % del ancho del elemento principal como margen para que nunca llene todo el elemento principal. Si el tamaño del elemento principal cambia, el margen también se actualizará.

  .child {  margin: 10%;}

• ellos:Desea que la fuente de un elemento secundario tenga la mitad del tamaño de fuente de su elemento principal (por ejemplo, el párrafo debajo del título de una sección).

  .child {  font-size: 0.5em;}

• movimiento rápido del ojo:El tamaño de la fuente debe ser el doble del tamaño de la fuente del elemento raíz. Esta podría ser la forma en que dimensionas tus encabezados, ya que todos deben tener el mismo tamaño independientemente del contenedor principal.

  .header {  font-size: 2rem;}

• c:Tienes una fuente monoespaciada (los caracteres siempre tienen el mismo ancho) y solo tienes espacio para 10 caracteres.

  .small-text {  width: 10ch;}

• Vuelve:Su página de destino siempre debe tener la altura de la ventana gráfica.

  .wrapper {  height: 100vh;}

• Volkswagen:Tiene una sección con texto que debe tener la mitad del ancho de la ventana gráfica.

  .half-size {  width: 50vw;}

• Víctima:Tienes una imagen que siempre debe tener el mismo ancho que la dimensión más pequeña de la ventana gráfica. En un teléfono que se sostiene en modo vertical, la imagen tendrá el mismo ancho que la ventana gráfica.

  .min-width {  width: 100vmin;}

• Vmáx.:No te importa si una imagen se corta porque quieres que ocupe por completo la dimensión más grande de la ventana gráfica. Por ejemplo, si se utiliza una imagen de un patrón como fondo.

  .max-width {  width: 100vmax;}

• ex:Probablemente no lo verás exmuy a menudo, pero generalmente es una buena medida de la sección media de una fuente. Digamos que quieres que line-heightla altura de una fuente sea el doble de la "x" de la fuente.

  .double-x {  line-height: 2ex;}

En general, cuándo y cómo elegir sus unidades CSS dependerá de un par de preguntas:

• ¿Quiero que lo que estoy diseñando se escale cuando cambia el tamaño de la ventana gráfica?
• Si quiero escalarlo, ¿con respecto a qué quiero que se escale en la aplicación?

Una vez que haya respondido estas preguntas, será mucho más fácil determinar qué unidad utilizar.

Lectura adicional

Puede profundizar más en las unidades de ventana gráfica leyendo este artículo, o echar un vistazo a este artículo sobre unidades em vs rem si la diferencia entre esas dos unidades aún no está clara.