Unidades absolutas: px, pt, cm, mm, in

Las unidades absolutas en CSS son aquellas que tienen un valor fijo y no cambian en función del contexto. Estas unidades mantienen sus dimensiones independientemente del dispositivo o del tamaño de la pantalla donde se visualice el contenido.

Píxeles (px)

El píxel es probablemente la unidad más utilizada en CSS. Representa un punto en la pantalla y proporciona un control preciso sobre el tamaño de los elementos.

.box {
  width: 200px;
  height: 100px;
  border: 1px solid #333;
}

Los píxeles son ideales para:

• Bordes finos donde necesitas precisión exacta
• Tamaños de elementos que no deben cambiar entre dispositivos
• Definir tamaños mínimos o máximos

Sin embargo, es importante entender que un píxel CSS no siempre equivale a un píxel físico del dispositivo, especialmente en pantallas de alta densidad (como las pantallas Retina de Apple).

Puntos (pt)

Los puntos son una unidad tradicionalmente utilizada en medios impresos. Un punto equivale a 1/72 de pulgada.

.print-title {
  font-size: 12pt;
  margin-bottom: 6pt;
}

Esta unidad es más adecuada para:

• Hojas de estilo específicas para impresión
• Cuando necesitas que el tamaño en papel sea predecible

@media print {
  body {
    font-size: 10pt;
  }
  h1 {
    font-size: 16pt;
  }
}

Centímetros (cm)

Los centímetros son una unidad de medida del sistema métrico que resulta familiar en muchos países. Un centímetro equivale a 10 milímetros.

.card {
  width: 8.5cm;
  height: 5.5cm;
  margin: 0.5cm;
}

Esta unidad es útil para:

• Diseños que deben coincidir con medidas físicas reales
• Hojas de estilo para impresión donde se necesita precisión métrica

Milímetros (mm)

Los milímetros ofrecen una precisión mayor que los centímetros y son útiles cuando necesitas medidas muy exactas.

.fine-border {
  border: 0.5mm solid black;
}

.photo {
  padding: 2mm;
  box-shadow: 1mm 1mm 2mm rgba(0, 0, 0, 0.3);
}

Los milímetros son especialmente útiles en:

• Diseños para impresión que requieren alta precisión
• Elementos pequeños donde los centímetros resultan demasiado grandes

Pulgadas (in)

Las pulgadas son la unidad de medida estándar en Estados Unidos y algunos otros países. Una pulgada equivale a 2.54 centímetros.

.document {
  margin: 0.5in;
  padding: 0.25in;
}

.letterhead {
  height: 1in;
}

Esta unidad es apropiada para:

• Diseños orientados a impresión en países que utilizan el sistema imperial
• Cuando necesitas que el contenido coincida con tamaños de papel estándar como carta (8.5in × 11in)

Comparación de unidades absolutas

Para entender mejor la relación entre estas unidades, aquí tienes una tabla de equivalencias:

• 1in = 96px = 72pt = 2.54cm = 25.4mm
• 1cm = 37.8px = 28.35pt = 0.39in = 10mm
• 1mm = 3.78px = 2.84pt = 0.04in = 0.1cm

Ejemplo práctico

Veamos un ejemplo que combina varias unidades absolutas para crear un elemento de tarjeta de presentación:

.business-card {
  /* Tamaño estándar de tarjeta de presentación */
  width: 3.5in;
  height: 2in;
  
  /* Bordes y espaciado */
  border: 0.5mm solid #000;
  padding: 0.2in;
  
  /* Tipografía */
  font-size: 12pt;
}

.logo {
  height: 1cm;
  margin-bottom: 0.5cm;
}

@media screen {
  /* Ajuste para visualización en pantalla */
  .business-card {
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
  }
}

Consideraciones importantes

Al trabajar con unidades absolutas, ten en cuenta estas limitaciones:

• No se adaptan automáticamente a diferentes tamaños de pantalla
• Pueden causar problemas de accesibilidad si se usan para tamaños de texto
• No responden a las preferencias del usuario (como el tamaño de fuente del navegador)

Por estas razones, las unidades absolutas son más adecuadas para:

• Elementos que deben mantener proporciones exactas
• Diseños para impresión
• Bordes y detalles pequeños donde se necesita precisión
• Como valores mínimos o máximos en combinación con unidades relativas

En el desarrollo web moderno, es recomendable combinar unidades absolutas con unidades relativas para crear diseños que sean tanto precisos como adaptables.

Unidades relativas al texto: em, rem, ch

Las unidades relativas al texto en CSS son aquellas que se ajustan dinámicamente según el tamaño de la fuente del elemento o del documento. Estas unidades son fundamentales para crear diseños flexibles que respeten las preferencias de accesibilidad de los usuarios.

La unidad em

La unidad em se basa en el tamaño de fuente del elemento actual. Un valor de 1em equivale exactamente al tamaño de fuente del elemento donde se aplica.

.container {
  font-size: 16px;
  padding: 1em; /* Equivale a 16px */
}

.container p {
  font-size: 1.2em; /* Equivale a 19.2px (16px * 1.2) */
  margin-bottom: 0.5em; /* Equivale a 9.6px (19.2px * 0.5) */
}

La unidad em es especialmente útil para:

• Crear márgenes y rellenos proporcionales al tamaño del texto
• Diseñar componentes que escalan uniformemente
• Mantener proporciones consistentes en diferentes contextos

Sin embargo, es importante entender que los valores em se acumulan en elementos anidados:

.parent {
  font-size: 16px;
}

.child {
  font-size: 1.5em; /* 24px (16px * 1.5) */
}

.grandchild {
  font-size: 1.5em; /* 36px (24px * 1.5), no 24px */
}

Este comportamiento puede ser tanto una ventaja como un desafío, dependiendo de lo que necesites lograr en tu diseño.

La unidad rem

La unidad rem (root em) siempre se basa en el tamaño de fuente del elemento raíz (html), evitando el problema de acumulación que puede ocurrir con em.

html {
  font-size: 16px; /* Tamaño base para cálculos rem */
}

.box {
  font-size: 1.5rem; /* Siempre 24px (16px * 1.5) */
  padding: 1rem; /* Siempre 16px */
  margin-bottom: 2rem; /* Siempre 32px */
}

La unidad rem es ideal para:

• Crear sistemas de escala tipográfica consistentes
• Mantener proporciones predecibles en todo el sitio
• Facilitar la accesibilidad permitiendo que todo el sitio escale cuando el usuario ajusta el tamaño de fuente base

Un enfoque común es establecer el tamaño de fuente base en el elemento html como porcentaje:

html {
  font-size: 100%; /* Por defecto equivale a 16px en la mayoría de navegadores */
}

@media (max-width: 768px) {
  html {
    font-size: 90%; /* Reduce proporcionalmente todos los tamaños en pantallas pequeñas */
  }
}

La unidad ch

La unidad ch se basa en el ancho del carácter "0" (cero) de la fuente actual. Es una medida menos conocida pero extremadamente útil para controlar anchos de texto.

.text-input {
  width: 30ch; /* Espacio para aproximadamente 30 caracteres */
}

.paragraph {
  max-width: 60ch; /* Ancho óptimo para legibilidad */
}

Esta unidad es perfecta para:

• Crear campos de formulario con un tamaño apropiado para su contenido
• Establecer anchos de columna para una legibilidad óptima (entre 45-75ch)
• Diseñar elementos que deben adaptarse al tamaño del texto

La unidad ch es especialmente valiosa en diseños que priorizan la lectura, ya que permite mantener líneas de texto con una longitud óptima para la legibilidad.

Comparación práctica

Veamos cómo se comportan estas unidades en un ejemplo práctico:

.container {
  font-size: 18px;
}

.em-example {
  font-size: 1.2em; /* 21.6px (18px * 1.2) */
  padding: 1em; /* 21.6px (basado en su propio font-size) */
}

.rem-example {
  font-size: 1.2rem; /* 19.2px (16px * 1.2), asumiendo font-size del html = 16px */
  padding: 1rem; /* 16px (siempre basado en el root) */
}

.ch-example {
  width: 20ch; /* Aproximadamente 20 caracteres de ancho */
  font-family: monospace; /* En fuentes monoespaciadas, 1ch = ancho exacto de cada carácter */
}

Combinando unidades para mayor flexibilidad

Una estrategia efectiva es combinar estas unidades según sus fortalezas:

body {
  font-size: 1rem; /* Tamaño base relativo a la configuración del usuario */
  line-height: 1.5; /* Proporción sin unidad, relativa al tamaño de fuente */
}

h1 {
  font-size: 2.5rem; /* Tamaño consistente basado en la raíz */
  margin-bottom: 0.5em; /* Espacio proporcional a su propio tamaño */
}

.card {
  padding: 1.5rem; /* Espaciado consistente en todo el sitio */
  max-width: 60ch; /* Ancho óptimo para lectura */
}

Ejemplo de sistema tipográfico escalable

Un sistema tipográfico bien diseñado puede aprovechar estas unidades:

:root {
  --base-size: 1rem;
  --scale-ratio: 1.25; /* Escala tipográfica de mayor cuarta */
}

body {
  font-size: var(--base-size);
  line-height: 1.5;
}

h1 {
  font-size: calc(var(--base-size) * var(--scale-ratio) * var(--scale-ratio) * var(--scale-ratio));
  margin-bottom: 0.5em;
}

h2 {
  font-size: calc(var(--base-size) * var(--scale-ratio) * var(--scale-ratio));
  margin-bottom: 0.5em;
}

h3 {
  font-size: calc(var(--base-size) * var(--scale-ratio));
  margin-bottom: 0.5em;
}

.container {
  max-width: 70ch;
  padding: 1.5rem;
}

Consideraciones de accesibilidad

Las unidades relativas al texto son cruciales para la accesibilidad porque:

• Respetan las preferencias de tamaño de texto del usuario
• Permiten que el contenido se escale proporcionalmente
• Mantienen las relaciones espaciales cuando el usuario amplía el texto

Por ejemplo, si un usuario ha configurado un tamaño de fuente mayor en su navegador por problemas de visión, un diseño basado en unidades relativas se adaptará correctamente, mientras que uno basado únicamente en píxeles podría romperse o dificultar la lectura.

Cuándo usar cada unidad

• Usa rem para tamaños de fuente y dimensiones generales que deben ser consistentes en todo el sitio
• Usa em para espaciado dentro de componentes que deben escalar con su propio tamaño de texto
• Usa ch para controlar anchos de elementos basados en texto, especialmente para optimizar la legibilidad

Estas unidades relativas al texto son herramientas fundamentales para crear diseños web flexibles, accesibles y que se adaptan a las necesidades de los usuarios.

Unidades relativas al viewport: vw, vh, vmin, vmax

Las unidades relativas al viewport son un conjunto de medidas en CSS que se basan en las dimensiones de la ventana del navegador (viewport). A diferencia de las unidades absolutas o las relativas al texto, estas unidades permiten crear diseños que se adaptan proporcionalmente al tamaño de la pantalla del usuario.

¿Qué es el viewport?

El viewport es el área visible de una página web en la ventana del navegador. Sus dimensiones varían según el dispositivo y el tamaño de la ventana. Estas unidades nos permiten dimensionar elementos en relación directa con este espacio visible.

Unidad vw (viewport width)

La unidad vw representa un porcentaje del ancho del viewport. Específicamente, 1vw equivale al 1% del ancho de la ventana del navegador.

.banner {
  width: 100vw; /* Ocupa el 100% del ancho del viewport */
  font-size: 5vw; /* El tamaño de fuente será el 5% del ancho del viewport */
}

Esta unidad es perfecta para:

• Crear elementos que ocupen proporciones específicas del ancho de pantalla
• Diseñar tipografía fluida que se ajuste automáticamente a diferentes tamaños de pantalla
• Mantener proporciones consistentes en diseños responsivos

Unidad vh (viewport height)

La unidad vh funciona de manera similar a vw, pero se basa en la altura del viewport. 1vh equivale al 1% de la altura de la ventana del navegador.

.full-screen-section {
  height: 100vh; /* Ocupa el 100% de la altura del viewport */
  padding: 5vh; /* Relleno equivalente al 5% de la altura del viewport */
}

Esta unidad es ideal para:

• Crear secciones de altura completa
• Establecer márgenes y rellenos proporcionales a la altura de la pantalla
• Diseñar interfaces que mantengan proporciones verticales consistentes

Un ejemplo práctico de uso combinado:

.hero {
  height: 80vh; /* Ocupa el 80% de la altura de la pantalla */
  padding: 2vh 5vw; /* Relleno vertical 2% de altura, horizontal 5% de anchura */
}

.hero-title {
  font-size: 6vw; /* Título que se adapta al ancho de pantalla */
  margin-bottom: 2vh; /* Espacio inferior proporcional a la altura */
}

Unidad vmin (viewport minimum)

La unidad vmin se basa en la dimensión más pequeña del viewport, ya sea el ancho o el alto. 1vmin equivale al 1% de la dimensión más pequeña entre el ancho y el alto del viewport.

.square-element {
  width: 50vmin; /* 50% de la dimensión más pequeña del viewport */
  height: 50vmin; /* Mantiene la proporción cuadrada */
}

Esta unidad es especialmente útil para:

• Crear elementos que mantengan proporciones cuadradas
• Asegurar que los elementos no sean demasiado grandes en ninguna orientación
• Diseñar componentes que se adapten bien tanto en dispositivos horizontales como verticales

Unidad vmax (viewport maximum)

La unidad vmax se basa en la dimensión más grande del viewport. 1vmax equivale al 1% de la dimensión más grande entre el ancho y el alto del viewport.

.prominent-element {
  font-size: 7vmax; /* 7% de la dimensión más grande del viewport */
  margin: 2vmax; /* Margen proporcional a la dimensión más grande */
}

Esta unidad es perfecta para:

• Elementos que deben destacar independientemente de la orientación
• Mantener proporciones consistentes en elementos grandes
• Crear espaciados que se adapten a la dimensión dominante de la pantalla

Ejemplo práctico: Diseño adaptativo con unidades viewport

Veamos un ejemplo de una tarjeta que se adapta perfectamente a diferentes tamaños de pantalla:

.adaptive-card {
  width: 80vw;
  max-width: 600px; /* Limitamos el crecimiento en pantallas grandes */
  padding: 3vh 4vw;
  border-radius: 2vmin; /* Radio de borde que se adapta proporcionalmente */
  box-shadow: 0 0.5vmin 2vmin rgba(0, 0, 0, 0.2);
}

.card-title {
  font-size: 4vmin; /* Tamaño que se adapta pero no crece demasiado */
  margin-bottom: 2vh;
}

.card-image {
  height: 30vh; /* Altura proporcional a la pantalla */
  max-height: 300px; /* Con un límite máximo */
}

Combinando unidades viewport con media queries

Para un control más preciso, podemos combinar estas unidades con media queries:

.responsive-text {
  font-size: 4vw; /* Base para pantallas pequeñas */
}

@media (min-width: 768px) {
  .responsive-text {
    font-size: 3vw; /* Reducimos la proporción en pantallas medianas */
  }
}

@media (min-width: 1200px) {
  .responsive-text {
    font-size: 2vw; /* Aún menor proporción en pantallas grandes */
    max-font-size: 32px; /* Limitamos el crecimiento (requiere navegadores modernos) */
  }
}

Caso de uso: Pantalla completa con ajuste de contenido

Un caso de uso común es crear secciones de pantalla completa que ajusten su contenido:

.fullscreen-section {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vmin; /* Espaciado adaptativo en todas direcciones */
}

.content-container {
  max-height: 90vh; /* Evita desbordamiento vertical */
  max-width: 90vw; /* Evita desbordamiento horizontal */
  overflow: auto; /* Permite desplazamiento si es necesario */
}

Consideraciones importantes

Al trabajar con unidades viewport, ten en cuenta:

• En dispositivos móviles, el viewport puede cambiar cuando aparece el teclado virtual
• Los navegadores antiguos pueden tener soporte limitado para estas unidades
• Los valores muy grandes pueden crear elementos desproporcionados en pantallas extremadamente anchas o altas

Para mitigar estos problemas, es recomendable:

• Establecer valores máximos y mínimos usando max-width, min-height, etc.
• Combinar con media queries para ajustes específicos según el tamaño de pantalla
• Probar en diferentes dispositivos y orientaciones

Ejemplo de interfaz completa con unidades viewport

Veamos cómo podríamos estructurar una interfaz completa usando estas unidades:

.page-container {
  min-height: 100vh; /* Asegura que ocupe al menos toda la altura */
}

.header {
  height: 10vh;
  min-height: 60px; /* Altura mínima para pantallas muy pequeñas */
  padding: 0 5vw;
}

.main-content {
  min-height: 80vh; /* Asegura espacio para el contenido principal */
  padding: 3vh 5vw;
}

.sidebar {
  width: 25vw;
  max-width: 300px; /* Limita el ancho en pantallas grandes */
}

.footer {
  height: 10vh;
  min-height: 80px;
  padding: 2vh 5vw;
}

.modal {
  width: 80vw;
  height: 70vh;
  max-width: 800px;
  max-height: 600px;
  border-radius: 2vmin;
}

Compatibilidad y rendimiento

Las unidades viewport tienen excelente soporte en navegadores modernos y ofrecen un rendimiento óptimo ya que el navegador puede calcular los valores directamente sin necesidad de cálculos en cascada (como ocurre con em).

Estas unidades son fundamentales para crear diseños verdaderamente fluidos que se adapten no solo a diferentes tamaños de pantalla, sino que mantengan proporciones consistentes en cualquier dispositivo, desde pequeños móviles hasta grandes monitores.

Porcentajes y cálculo de valores con calc()

Los porcentajes y la función calc() son herramientas fundamentales en CSS que nos permiten crear diseños flexibles y realizar operaciones matemáticas directamente en nuestras hojas de estilo. Estas características son esenciales para desarrollar interfaces adaptables y mantener relaciones proporcionales entre elementos.

Porcentajes en CSS

Los porcentajes en CSS siempre se calculan en relación a otro valor, generalmente el del elemento padre. Esta característica los hace extremadamente útiles para crear diseños responsivos.

.container {
  width: 80%; /* 80% del ancho del elemento padre */
  margin: 0 auto; /* Centrado horizontal */
}

.column {
  width: 50%; /* Mitad del ancho del contenedor padre */
  float: left;
}

Es importante entender que el valor de referencia para los porcentajes varía según la propiedad:

• Para width: se basa en el ancho del elemento contenedor
• Para height: se basa en la altura del elemento contenedor
• Para margin y padding: siempre se basan en el ancho del elemento contenedor (incluso los valores verticales)
• Para font-size: se basa en el tamaño de fuente heredado

.parent {
  width: 500px;
  height: 300px;
}

.child {
  width: 50%; /* 250px (50% de 500px) */
  height: 50%; /* 150px (50% de 300px) */
  padding: 10%; /* 50px (10% de 500px) en todos los lados */
  margin-top: 5%; /* 25px (5% de 500px) */
}

Los porcentajes son especialmente útiles para:

• Crear layouts fluidos que se adaptan al tamaño de la ventana
• Mantener proporciones entre elementos relacionados
• Establecer márgenes y rellenos que escalan con el contenedor

La función calc()

La función calc() permite realizar operaciones matemáticas con valores CSS, incluso mezclando diferentes unidades. Esto abre posibilidades que antes requerían JavaScript o valores fijos.

.sidebar {
  /* Resta 20px del 100% del ancho disponible */
  width: calc(100% - 20px);
}

La sintaxis básica de calc() es:

propiedad: calc(expresión);

Donde la expresión puede incluir:

• Operaciones: suma (+), resta (-), multiplicación (*), división (/)
• Diferentes unidades: px, em, rem, %, vw, etc.
• Paréntesis para controlar el orden de las operaciones

Es crucial incluir espacios alrededor de los operadores + y - para que el navegador interprete correctamente la expresión.

/* Correcto */
width: calc(100% - 20px);

/* Incorrecto - causará error */
width: calc(100%-20px);

Casos de uso prácticos

1. Crear márgenes fijos con ancho fluido

.content {
  /* Ancho total menos 2rem de margen a cada lado */
  width: calc(100% - 4rem);
  margin: 0 2rem;
}

2. Dividir el espacio equitativamente con separación fija

.gallery {
  display: flex;
  gap: 10px;
}

.gallery-item {
  /* Divide el espacio en 3 columnas con 10px de separación entre ellas */
  width: calc((100% - 20px) / 3);
}

3. Combinar unidades relativas y absolutas

.header {
  /* Altura base de 50px más 2em adicionales basados en el tamaño de fuente */
  height: calc(50px + 2em);
}

4. Crear diseños con proporciones específicas

.video-container {
  /* Mantiene una proporción 16:9 */
  width: 100%;
  height: calc(100vw * 9 / 16);
  max-height: calc(100vh - 80px); /* Evita que sea más alto que la ventana menos 80px */
}

Combinando porcentajes y calc()

La verdadera potencia surge al combinar porcentajes con calc() para crear diseños complejos y adaptables:

.layout {
  /* Área de contenido principal */
  .main {
    /* 75% del ancho menos 20px de margen */
    width: calc(75% - 20px);
    float: left;
    margin-right: 20px;
  }
  
  /* Barra lateral */
  .sidebar {
    /* Ocupa el 25% restante */
    width: 25%;
    float: left;
  }
}

Ejemplo práctico: Layout de tres columnas adaptable

Veamos cómo crear un layout de tres columnas con separación fija entre ellas:

.container {
  display: flex;
  gap: 20px; /* Espacio entre columnas */
  padding: 15px;
}

.column {
  /* Cada columna ocupa un tercio del espacio menos los espacios entre ellas */
  width: calc((100% - 40px) / 3);
  background-color: #f0f0f0;
  padding: 15px;
}

/* En pantallas pequeñas, cambiamos a una columna */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
  
  .column {
    width: 100%;
    margin-bottom: 15px;
  }
}

Anidando cálculos

La función calc() permite anidar operaciones para cálculos más complejos:

.complex-element {
  /* Calcula el 90% del espacio restante después de restar 50px */
  width: calc(90% * (100% - 50px));
  
  /* Equivalente a: width: calc(90% * calc(100% - 50px)); */
}

Variables CSS con calc()

La combinación de variables CSS (custom properties) con calc() crea sistemas de diseño extremadamente flexibles:

:root {
  --spacing-unit: 8px;
  --main-content: 75%;
  --sidebar-width: 25%;
  --gutter: 20px;
}

.layout {
  display: flex;
  gap: var(--gutter);
}

.main-content {
  width: calc(var(--main-content) - var(--gutter)/2);
}

.sidebar {
  width: calc(var(--sidebar-width) - var(--gutter)/2);
}

.padding-small {
  padding: calc(var(--spacing-unit) * 2);
}

.padding-medium {
  padding: calc(var(--spacing-unit) * 4);
}

Consideraciones de rendimiento y compatibilidad

• La función calc() tiene excelente soporte en navegadores modernos (IE9+)
• Las operaciones con calc() se calculan en tiempo de renderizado, no afectando significativamente el rendimiento
• Para cálculos muy complejos o repetitivos, considera usar variables CSS para almacenar resultados intermedios

:root {
  --half-width: calc(50% - 10px); /* Calcula una vez y reutiliza */
}

.element-1 {
  width: var(--half-width);
}

.element-2 {
  margin-left: var(--half-width);
}

Limitaciones a tener en cuenta

• No se pueden usar valores de color en calc()
• Algunas propiedades como z-index esperan valores enteros y pueden tener comportamientos inesperados con calc()
• En navegadores muy antiguos, necesitarás proporcionar alternativas

/* Enfoque con fallback */
.element {
  width: 90%; /* Fallback para navegadores antiguos */
  width: calc(100% - 50px); /* Navegadores modernos usarán esto */
}

Ejemplo avanzado: Sistema de grid personalizado

Podemos crear un sistema de grid flexible combinando porcentajes y calc():

.grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px; /* Compensa el padding de las columnas */
}

.col {
  padding: 0 10px;
  box-sizing: border-box;
}

.col-1 { width: calc(100% / 12 * 1); }
.col-2 { width: calc(100% / 12 * 2); }
.col-3 { width: calc(100% / 12 * 3); }
.col-4 { width: calc(100% / 12 * 4); }
.col-6 { width: calc(100% / 12 * 6); }
.col-12 { width: 100%; }

@media (max-width: 768px) {
  .col-md-6 { width: 50%; }
  .col-md-12 { width: 100%; }
}

Los porcentajes y la función calc() son herramientas esenciales en el arsenal de cualquier desarrollador front-end. Dominando estas técnicas, podrás crear diseños flexibles y matemáticamente precisos que se adapten a cualquier dispositivo o contexto.