Web Breakpoints y media queries en CSS

Veamos un esquema y la relación que tienen los web breakpoints y las media queries en CSS, y por otra parte, cómo trabajr de forma sencilla con ellos.

Web Breakpoints

Un web breakpoint (o simplemente «breakpoint») es un punto de ruptura o un límite que se utiliza en el diseño web adaptable (o responsive web design) para definir cómo debe cambiar la disposición de un sitio web en función del tamaño o la resolución de la pantalla del dispositivo que lo está visualizando. Específicamente, los breakpoints se establecen en el código CSS para determinar cuándo se debe aplicar un conjunto de estilos específicos que adapten el diseño a diferentes anchos de pantalla, como móviles, tabletas o escritorios.

Según en que dispositivos estemos, el límite de píxeles es un u otro. Lo veremos claro en el siguiente esquema:

Imágen extraida del X de Abraham John. Al que os recomendamos que sigáis.

De esta manera podemos trabajar cómo se muestra la información de una página web, según el dispositivo en el que estemos (medidas).

Media Queries en CSS

Trabajaremos lo que llamamos Diseño Responsive. Creamos un fichero CSS que aplica un diseño u otro a los objetos, según las medidas en las que se deba mostrar.

Así pues, un objeto le podemos dar un color, ancho… segun la medida de la pantalla en la que pueda mostrarse.

Y ahora, CSS ha añadido novedades. Atento a los ejemplos para que veáis qué podemos hacer:

Ejemplo 1

.contenedor {
  background: var(--color, red);
  max-height: 600px;
}

@media (width <= 480px) {
  .contenedor {
    --color: grey;
  }
}

@media (width >= 768px) {
  .contenedor {
    --color: black;
  }
}

Hemos asignado unas características a la clase «contenedor». Luego hemos definido varias Media Queries que varían las características de la clase contenedor, según su medida.

Ejemplo 2

Aquí añadimos una novedad que lo simplifica todo, y lo hace mucho mas legible:

.contenedor {
  background: var(--color, red);
  max-height: 600px;

  @media (width <= 480px) { --color: grey; }
  @media (width >= 768px) { --color: black; }
}

Ejemplo 3

Y una de las novedades que más aplaudimos muchos es la siguiente media query:

@media (480px <= width <= 768px) {
  .contenedor {
    background: var(--color, grey);
  }
}

Dominar los breakpoints web y las media queries en CSS, te da el poder de mostrar de forma amigable toda la información a los usuarios en diferentes dispositivos, y eso es muy importante.

Si te ha parecido interesante el artículo, puedes visitar nuestra sección de Programación web con muchos más artículos que te pueden ser de utilidad.