El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

Las consultas de medios (media queries) son una característica poderosa de CSS que permite aplicar estilos específicos a diferentes dispositivos y tamaños de pantalla. Esto es esencial para crear diseños responsivos que se adapten a una variedad de dispositivos, desde teléfonos móviles hasta monitores de escritorio.

¿Qué son las Consultas de Medios?

Las consultas de medios permiten definir condiciones bajo las cuales se aplican ciertos estilos CSS. Estas condiciones pueden basarse en características del dispositivo, como el ancho de la pantalla, la resolución, la orientación, entre otras.

Sintaxis Básica

La sintaxis básica de una consulta de medios es la siguiente:

@media (condición) {
  /* Estilos CSS */
}

Ejemplo Básico

/* Estilos para todos los dispositivos */
body {
  background-color: white;
  color: black;
}

/* Estilos para dispositivos con un ancho máximo de 600px */
@media (max-width: 600px) {
  body {
    background-color: black;
    color: white;
  }
}

En este ejemplo, el fondo del body será blanco y el texto negro en todos los dispositivos. Sin embargo, en dispositivos con un ancho máximo de 600px, el fondo será negro y el texto blanco.

Tipos de Consultas de Medios

Ancho y Alto

Las consultas de medios más comunes se basan en el ancho y el alto de la ventana gráfica (viewport).

max-width: Aplica estilos si el ancho de la ventana gráfica es menor o igual al valor especificado.
min-width: Aplica estilos si el ancho de la ventana gráfica es mayor o igual al valor especificado.
max-height: Aplica estilos si la altura de la ventana gráfica es menor o igual al valor especificado.
min-height: Aplica estilos si la altura de la ventana gráfica es mayor o igual al valor especificado.

Ejemplo

@media (max-width: 768px) {
  .container {
    width: 100%;
  }
}

@media (min-width: 769px) {
  .container {
    width: 50%;
  }
}

Orientación

Las consultas de medios también pueden basarse en la orientación del dispositivo.

orientation: portrait: Aplica estilos si la orientación es vertical.
orientation: landscape: Aplica estilos si la orientación es horizontal.

Ejemplo

@media (orientation: portrait) {
  .sidebar {
    display: none;
  }
}

@media (orientation: landscape) {
  .sidebar {
    display: block;
  }
}

Resolución

Las consultas de medios pueden basarse en la resolución del dispositivo.

min-resolution: Aplica estilos si la resolución es mayor o igual al valor especificado.
max-resolution: Aplica estilos si la resolución es menor o igual al valor especificado.

Ejemplo

@media (min-resolution: 192dpi) {
  .high-res {
    background-image: url('high-res-image.png');
  }
}

Ejercicio Práctico

Ejercicio 1: Estilos Responsivos Básicos

Crea un archivo CSS que aplique diferentes estilos a un contenedor .box dependiendo del ancho de la pantalla.

Si el ancho de la pantalla es menor o igual a 600px, el contenedor .box debe tener un fondo rojo.
Si el ancho de la pantalla es mayor a 600px y menor o igual a 1200px, el contenedor .box debe tener un fondo azul.
Si el ancho de la pantalla es mayor a 1200px, el contenedor .box debe tener un fondo verde.

Solución

.box {
  width: 100%;
  height: 100px;
}

/* Ancho de pantalla menor o igual a 600px */
@media (max-width: 600px) {
  .box {
    background-color: red;
  }
}

/* Ancho de pantalla mayor a 600px y menor o igual a 1200px */
@media (min-width: 601px) and (max-width: 1200px) {
  .box {
    background-color: blue;
  }
}

/* Ancho de pantalla mayor a 1200px */
@media (min-width: 1201px) {
  .box {
    background-color: green;
  }
}

Resumen

Las consultas de medios son una herramienta esencial para el diseño responsivo en CSS. Permiten aplicar estilos específicos basados en características del dispositivo, como el ancho de la pantalla, la orientación y la resolución. Con las consultas de medios, puedes crear sitios web que se adapten a una variedad de dispositivos, proporcionando una experiencia de usuario óptima en todas las plataformas.

En el próximo tema, exploraremos la tipografía responsiva y cómo ajustar el tamaño del texto para diferentes dispositivos.

Consultas de Medios

¿Qué son las Consultas de Medios?

Sintaxis Básica

Ejemplo Básico

Tipos de Consultas de Medios

Ancho y Alto

Ejemplo

Orientación

Ejemplo

Resolución

Ejemplo

Ejercicio Práctico

Ejercicio 1: Estilos Responsivos Básicos

Solución

Resumen

Maestría en CSS: De Principiante a Avanzado

Módulo 1: Introducción a CSS

Módulo 2: Estilización de Texto y Fuentes

Módulo 3: Modelo de Caja y Diseño

Módulo 4: Posicionamiento y Flotación

Módulo 5: Flexbox

Módulo 6: CSS Grid

Módulo 7: Técnicas Avanzadas de CSS

Módulo 8: Diseño Responsivo

Módulo 9: Preprocesadores y Frameworks

Módulo 10: Mejores Prácticas y Optimización

Módulo 11: Proyecto: Construyendo un Sitio Web Responsivo