Breakpoints y Media Queries en CSS

Hoy en día navegamos desde celulares, tablets, notebooks, televisores, pero… ¡cada pantalla es distinta!
Si un diseño no se adapta bien, puede verse roto o difícil de usar.
Para solucionar esto, CSS nos ofrece las media queries, que junto con los breakpoints, permiten construir diseños responsive.

¿Qué es una Media Query?

Una media query es una regla de CSS que nos permite aplicar estilos solo si se cumple una condición sobre el dispositivo (ancho de pantalla, altura, orientación, resolución, etc.).

Ejemplo básico:

@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

En este caso, el fondo se volverá de color lightblue solo si la pantalla mide 600px de ancho o menos.

¿Qué son los Breakpoints?

Un breakpoint (o punto de quiebre) es el ancho de pantalla donde nuestro diseño “cambia” para adaptarse mejor.
Generalmente se definen según los dispositivos más comunes:

• Móviles: hasta 576px.

• Tablets: entre 577px y 768px.

• Laptops: entre 769px y 1024px.

• Desktops: desde 1025px en adelante.

Ejemplo típico de breakpoints:

/* Estilos para móviles */
@media (max-width: 576px) {
  .container { font-size: 14px; }
}

/* Estilos para tablets */
@media (min-width: 577px) and (max-width: 768px) {
  .container { font-size: 16px; }
}

/* Estilos para laptops */
@media (min-width: 769px) and (max-width: 1024px) {
  .container { font-size: 18px; }
}

/* Estilos para desktops */
@media (min-width: 1025px) {
  .container { font-size: 20px; }
}

Mobile First vs Desktop First

Existen dos estrategias principales para definir breakpoints:

• Mobile First → se empieza diseñando para pantallas pequeñas y se van agregando estilos para pantallas más grandes. Es la estrategia mas recomendada para diseñar una pagina web responsive.

    .container { font-size: 14px; } /* estilos base móviles */
  
    @media (min-width: 768px) {
      .container { font-size: 18px; } /* tablets en adelante */
    }
  

• Desktop First → se empieza diseñando para pantallas grandes y luego se hacen ajustes para pantallas más pequeñas.

    .container { font-size: 20px; } /* estilos base desktop */
  
    @media (max-width: 768px) {
      .container { font-size: 14px; } /* móviles */
    }
  

Ejemplo práctico

Imaginemos que tenemos una tarjeta con un título y un texto:

.card {
  padding: 20px;
  background: white;
  border: 1px solid #ccc;
}

/* En móvil, el texto ocupa toda la pantalla */
@media (max-width: 576px) {
  .card { font-size: 14px; }
}

/* En tablets, un poco más grande */
@media (min-width: 577px) and (max-width: 768px) {
  .card { font-size: 16px; }
}

/* En desktop, más espacio y texto más grande */
@media (min-width: 1025px) {
  .card { font-size: 20px; padding: 40px; }
}

Como se puede observar en la imagen vemos que la tarjeta ahora se adapta a distintos dispositivos, cambiando el tamaño de fuente y el padding según el dispositivo en donde se visualice la tarjeta.

Conclusión

Los breakpoints y media queries son la base del diseño responsive en CSS. Con ellos logramos que nuestras páginas:

• Se adapten a distintos dispositivos.

• Mejoren la experiencia del usuario.

• Sean mas accesibles y usables.

Podés usar herramientas como Chrome DevTools, la cual se activa presionando la tecla F12 en el navegador en donde estas ejecutando tu pagina web y sirve para probar tu sitio en distintos tamaños de pantalla y ajustar tus breakpoints.