¿Cómo se utilizan las media queries en CSS para adaptar un diseño a diferentes tamaños de pantalla?

Las media queries en CSS son una característica fundamental para lograr un diseño web adaptable. Permiten aplicar bloques de estilos CSS de forma selectiva, únicamente cuando ciertas condiciones sobre el medio de visualización (como el ancho o alto de la pantalla, la orientación del dispositivo, o la resolución) se cumplen.

La sintaxis básica de una media query es la siguiente:

@media tipo-de-medio and (característica-de-medio: valor) {
  /* Aquí van las reglas CSS que se aplicarán si las condiciones se cumplen */
  selector {
    propiedad: valor;
  }
}Lenguaje del código: PHP (php)

• @media: Es la regla que inicia la media query.
• tipo-de-medio (opcional): Especifica a qué tipo de dispositivo se aplican los estilos. Los más comunes son screen (para pantallas de ordenador, tabletas, móviles), print (para la versión de impresión) o all (para todos los dispositivos). Si se omite, por defecto es all.
• característica-de-medio: valor: Es la condición que debe cumplirse. Algunas características comunes son:
  • min-width / max-width: Ancho mínimo o máximo de la ventana gráfica (viewport).
  • min-height / max-height: Alto mínimo o máximo.
  • orientation: portrait (vertical) o landscape (horizontal).

Ejemplo práctico:

Supongamos que tienes una barra lateral que quieres que se muestre al lado del contenido principal en pantallas grandes, pero apilada (debajo) en pantallas pequeñas.

/* Estilos base (podrían ser para móvil primero) */
.contenido-principal {
  width: 100%;
}
.barra-lateral {
  width: 100%;
  background-color: lightgray;
}

/* Estilos para pantallas de 768px de ancho o más */
@media screen and (min-width: 768px) {
  .contenedor-pagina {
    display: flex; /* Usamos Flexbox para el layout */
  }
  .contenido-principal {
    width: 70%;
    margin-right: 2%;
  }
  .barra-lateral {
    width: 28%;
  }
}Lenguaje del código: PHP (php)

En este ejemplo, los estilos dentro de la media query solo se aplicarán cuando el ancho de la pantalla sea de 768 píxeles o más. Definiendo varios de estos «puntos de corte» (breakpoints), puedes adaptar tu diseño para que se vea y funcione bien en un amplio rango de dispositivos.