¿Cómo funcionan las consultas de medios en el…

Las consultas de medios permiten aplicar estilos CSS específicos en función de las características del dispositivo o del área de visualización. Se utilizan para crear un diseño adaptable que se muestra correctamente en diferentes pantallas, incluyendo dispositivos móviles, tabletas y escritorios.

Sintaxis principal de una consulta de medios:

@media <tipo_de_medio> and (<expresión>) {
  /* reglas CSS */
}

<tipo_de_medio> determina a qué tipo de dispositivo se aplica la consulta (por ejemplo, screen, print, all).
<expresión> establece las condiciones bajo las cuales se aplican los estilos (por ejemplo, ancho, altura, orientación de pantalla, resolución).

Expresiones populares para diseño adaptable:

min-width: Los estilos se aplican si el ancho del área de visualización es igual o mayor que el valor especificado.
max-width: Los estilos se aplican si el ancho del área de visualización es igual o menor que el valor especificado.
orientation: Los estilos se aplican dependiendo de la orientación de la pantalla (portrait o landscape).
resolution: Los estilos se aplican dependiendo de la resolución de pantalla.

Ejemplo de uso de max-width para estilos en dispositivos móviles:

/* Estilos por defecto */
body {
  font-size: 16px;
}

/* Estilos para pantallas hasta 768px de ancho (típico para móviles) */
@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
  .container {
    padding: 10px;
  }
}

Ejemplo de uso de min-width para estilos en escritorios (enfoque "mobile first"):

/* Estilos por defecto para móviles */
.column {
  width: 100%;
}

/* Estilos para pantallas desde 992px de ancho (típico para escritorios) */
@media screen and (min-width: 992px) {
  .column {
    width: 50%;
    float: left;
  }
}

Combinación de expresiones con operadores and, or (en consultas de medios, or se escribe con comas) y not:

@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* Estilos solo para tablets */
}

@media screen and (orientation: landscape), print {
  /* Estilos para orientación horizontal y para impresión */
}

La meta-etiqueta viewport es importante para el correcto funcionamiento de las consultas de medios en dispositivos móviles:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width establece el ancho del área de visualización igual al ancho del dispositivo.
initial-scale=1.0 establece el nivel de zoom inicial.

Sin esta meta-etiqueta, muchos navegadores móviles escalan la página por defecto, ignorando el ancho real del dispositivo, lo que rompe la adaptabilidad.

¿Cómo funcionan las consultas de medios en el desarrollo web para el diseño adaptable, incluyendo dispositivos móviles?