¿Qué es un punto de quiebre en diseño adaptable?

El punto de interrupción (breakpoint) en diseño adaptable es el valor umbral del ancho de pantalla del dispositivo, al alcanzar o cruzar el cual cambian los estilos CSS de los elementos de la página.

El propósito principal de los puntos de interrupción:

• Garantizar una visualización óptima del contenido: En diferentes tamaños de pantalla, los bloques pueden tener diferentes tamaños, ubicaciones y márgenes.
• Ocultar/mostrar elementos: Por ejemplo, en dispositivos móviles se puede ocultar la barra lateral, y en escritorios mostrarla.
• Cambiar fuentes e imágenes: Para mejorar la legibilidad y el rendimiento.

Los puntos de interrupción se establecen mediante consultas de medios (media queries) en CSS:

/* Estilos por defecto (para dispositivos móviles primero) */
body {
  font-size: 16px;
}

/* Estilos para pantallas de 768px de ancho y superiores */
@media screen and (min-width: 768px) {
  body {
    font-size: 18px;
  }
  .sidebar {
    display: block; /* Mostrar barra lateral */
  }
}

/* Estilos para pantallas de 1200px de ancho y superiores */
@media screen and (min-width: 1200px) {
  body {
    font-size: 20px;
  }
}

Los puntos de interrupción típicos se basan en tamaños estándar de dispositivos, pero pueden ser personalizados según el diseño específico. Ejemplos de puntos de interrupción estándar:

Tamaño de pantalla	Uso típico
Hasta 576px	Muy pequeños (por ejemplo, teléfonos antiguos en modo retrato)
576px - 768px	Pequeños (teléfonos en modo paisaje, tablets pequeñas)
768px - 992px	Medianos (tablets en modo retrato, laptops)
992px - 1200px	Grandes (laptops, escritorios)
Más de 1200px - 1400px+	Muy grandes (monitores grandes)

Es importante diseñar con "mobile-first", comenzando con los puntos de interrupción más pequeños y añadiendo estilos para pantallas mayores, lo que facilita la sobrescritura de estilos.