Media query en CSS: ¿Qué es y como usar? Ejemplos!

Las media queries son fundamentales para el diseño responsive, permitiendo que tu página web se adapte a diferentes dispositivos y tamaños de pantalla. En este artículo, descubrirás qué es una media query, para qué sirve y cómo usarla con ejemplos prácticos en HTML y CSS. Aprende a implementar breakpoints, max-width y min-width en tu código, incluyendo aplicaciones en WordPress para mejorar la experiencia móvil.

1 ¿Qué son los Media Query en CSS?

Las Media Queries, o consultas de medios en CSS, son herramientas que permiten adaptar la apariencia de una página web a diferentes entornos y dispositivos.

Se introdujeron en CSS3 como una forma de crear diseños web responsivos, es decir, que se ajustan automáticamente a las características del dispositivo en que se visualizan, como el tamaño de pantalla, la orientación, la resolución e incluso la presencia de características de accesibilidad como el braille.

1.1. Ejemplo sencillo para entender como funcionan los Media Queries:

Supongamos que tenemos un título y un párrafo en una página web, y queremos que cuando dicha página se visualice a través de la pantalla de un celular, tenga un fondo (background) celeste, y cuando se visualice en una pantalla grande como una PC, tenga un background verde. En este caso implementamos en CSS un Media Query

Para ello podemos seguir estos pasos:

1. Primero tenemos una estructura HTML para introducir un título y un párrafo en una página web, como el siguiente:

2. Aplicamos las siguientes reglas CSS, para especificar lo deseado (visualización celeste en celular y verde en PC):

3. Al aplicar estas reglas CSS, estamos logrando que el título y el párrafo en la página web tengan el comportamiento que deseamos:

¿Y porque se logra este comportamiento usando Media Queries? Aquí te lo explico detallando el comportamiento de estas reglas CSS del paso 2:

1. .container en este selector CSS se aplica el fondo celeste en la página cuando se visualiza en una pantalla pequeña como un celular.
2. @media (min-width: 600px) {}: Este Media Query establece que todas las reglas que estén dentro de sus corchetes {}, se aplicaran cada vez que se visualice en una pantalla de 600px o más. Aquí ampliamos la explicación:
   • @media: Esta es la palabra clave que inicia una Media Query. Las Media Queries se utilizan para aplicar estilos CSS de manera condicional, en función de ciertas características del dispositivo o del entorno.
   • (min-width: 600px): Esta es la condición de la Media Query. Especifica que los estilos dentro del bloque solo se aplicarán si el ancho del viewport (pantalla en que se visualiza la página) es de al menos 600 píxeles. La propiedad min-width define el umbral mínimo de ancho para que se apliquen los estilos contenidos.
3. Reglas CSS dentro de la Media Query {}: Estas serían las reglas que se aplicarían solo cuando se cumple la condición del Media Query anterior (pantalla de 600px o más):
   • .container: Este es el selector de clase CSS que selecciona todos los elementos en el documento HTML que tienen la clase container. (como podemos ver en la estructura HTML). Los estilos definidos dentro del bloque de la Media Query se aplicarán a estos elementos cuando la condición de la Media Query se cumpla (600px o más).
   • width: 100%;: Establece la anchura del elemento .container al 100% del contenedor padre. Esto significa que el elemento ocupará toda la anchura disponible dentro de su contenedor.
   • background-color: lightgreen;: Cambia el color de fondo del elemento .container a un verde claro (lightgreen).

COMPORTAMIENTO:

1- Cuando el ancho del viewport es de menos de 600 píxeles:

• Cuando el ancho del viewport (pantalla en la cual se visualiza la página web) es menor a 600 píxeles, los estilos definidos dentro de esta Media Query (@media (min-width: 600px) {}) no se aplican. En este caso, el elemento .container seguirá cualquier estilo CSS que se le haya aplicado fuera de esta Media Query (en el ejemplo de reglas CSS sería el siguiente .container {background-color: lightblue;})

2- Cuando el ancho del viewport es de 600 píxeles o más:

• La anchura del elemento .container se establece en el 100% del contenedor padre, asegurando que ocupe todo el espacio horizontal disponible.
• El color de fondo del elemento .container se cambia a verde claro.

2. Ejemplos de usos comunes de Media Queries.

A continuación dejamos algunos de los usos mas comunes para comprender para que sirven los con Media Quey en el desarrollo web:

1. Adaptar el diseño para diferentes tamaños de pantalla:
2. Ocultar o mostrar elementos:
3. Cambiar el estilo de las tipografías:
4. Mejorar la accesibilidad:
5. Esconder elementos en orientación horizontal:
6. Cambiar el diseño para impresión:

2.1. Adaptar el diseño para diferentes tamaños de pantalla:

2.1.1. CAMBIAR EL TAMAÑO DE LETRA Y LOS ELEMENTOS DE LA INTERFAZ DE USUARIO para que sean legibles y fáciles de usar en pantallas pequeñas. Por ejemplo:

@media (max-width: 768px) {
  body {
    font-size: 16px;
  }
  h1 {
    font-size: 22px;
  }
  .button {
    padding: 10px 15px;
  }
}Lenguaje del código: CSS (css)

El media query @media (max-width: 768px) provoca los siguientes cambios en la visualización de una página web cuando el ancho del viewport (pantalla en la cual se visualiza la página web) es de 768 píxeles o menos:

1. body { font-size: 16px; }: El tamaño de la fuente del cuerpo del documento se ajusta a 16 píxeles.
2. h1 { font-size: 22px; }: El tamaño de la fuente de los encabezados <h1> se ajusta a 22 píxeles.
3. .button { padding: 10px 15px; }: Los elementos con la clase .button tienen un padding (relleno) de 10 píxeles en la parte superior e inferior, y 15 píxeles en los lados.

En resumen, este media query adapta el tamaño de fuente y el padding de los botones para mejorar la legibilidad y el uso en pantallas más pequeñas.

2.1.2. MODIFICAR LA DISPOSICIÓN DE LOS ELEMENTOS para optimizar la visualización en diferentes tamaños de pantalla.

@media (max-width: 768px) {
  .sidebar {
    display: none;
  }
  .main-content {
    width: 100%;
  }
}Lenguaje del código: CSS (css)

El media query @media (max-width: 768px) provoca los siguientes cambios en la visualización de una página web cuando el ancho del viewport es de 768 píxeles o menos:

1. .sidebar { display: none; }: Oculta el elemento con la clase .sidebar.
2. .main-content { width: 100%; }: El elemento con la clase .main-content ocupa el 100% del ancho disponible.

En resumen, este media query oculta la barra lateral y hace que el contenido principal se expanda para ocupar todo el ancho de la pantalla en dispositivos con un ancho de 768 píxeles o menos.

2.2. Ocultar o mostrar elementos:

En función del dispositivo o las características del navegador.

@media (print) {
  .navigation {
    display: none;
  }
}Lenguaje del código: CSS (css)

El media query @media (print) provoca el siguiente cambio en la visualización de una página web cuando se imprime (impresoras):

• .navigation { display: none; }: Oculta el elemento con la clase .navigation.

En resumen, este media query oculta la barra de navegación cuando la página web se imprime.

2.3. Cambiar el estilo de las tipografías:

Para mejorar la legibilidad en diferentes dispositivos.

@media (max-width: 480px) {
  body {
    font-family: sans-serif;
  }
}Lenguaje del código: CSS (css)

El media query @media (max-width: 480px) provoca el siguiente cambio en la visualización de una página web cuando el ancho del viewport es de 480 píxeles o menos:

• body { font-family: sans-serif; }: Cambia la familia de fuentes del cuerpo del documento a sans-serif.

En resumen, este media query establece que la fuente utilizada en todo el documento será sans-serif en pantallas con un ancho de 480 píxeles o menos.

2.4. Mejorar la accesibilidad:

Adaptar el diseño para usuarios con discapacidades.

@media (braille) {
  body {
    font-size: 18px;
    line-height: 24px;
  }
}Lenguaje del código: CSS (css)

El media query @media (braille) provoca el siguiente cambio en la visualización de una página web cuando se utiliza un dispositivo braille:

• body { font-size: 18px; line-height: 24px; }: Ajusta el tamaño de la fuente del cuerpo del documento a 18 píxeles y el interlineado a 24 píxeles.

En resumen, este media query establece un tamaño de fuente y un interlineado específicos para dispositivos braille.

2.5. Esconder elementos en orientación horizontal:

@media (orientation: landscape) {
  .sidebar {
    display: none;
  }
}Lenguaje del código: CSS (css)

El media query @media (orientation: landscape) provoca el siguiente cambio en la visualización de una página web cuando el dispositivo está en orientación horizontal (landscape):

• .sidebar { display: none; }: Oculta el elemento con la clase .sidebar.

En resumen, este media query oculta la barra lateral cuando el dispositivo se encuentra en orientación horizontal.

2.6. Cambiar el diseño para impresión:

@media print {
  body {
    column-count: 2;
  }
  .footer {
    page-break-before: always;
  }
}Lenguaje del código: CSS (css)

El media query @media print provoca los siguientes cambios en la visualización de una página web cuando se imprime:

1. body { column-count: 2; }: Divide el contenido del cuerpo del documento en dos columnas.
2. .footer { page-break-before: always; }: Fuerza un salto de página antes del elemento con la clase .footer.

En resumen, este media query divide el contenido del cuerpo en dos columnas y asegura que el pie de página comience en una nueva página al imprimir.

RECUERDA: Las Media Queries son una herramienta esencial para crear sitios web modernos, accesibles y que brinden una experiencia de usuario óptima en cualquier dispositivo.

3. Sintaxis del Media Query.

A continuación vamos a describir:

• La sintaxis básica de un Media Query.
• La sintaxis de Media Queries combinados.

3.1. La sintaxis básica de una Media Query es:

Explicación de los componentes de esta sintaxis:

@media:

• Propósito: Inicia la declaración de un media query, indicando que los estilos dentro del bloque se aplicarán solo si se cumplen las condiciones especificadas.

tipo-de-medio (Opcional):

• Propósito: Especifica el tipo de dispositivo o medio al que se aplican los estilos. Su implementación es opcional (a continuación ampliamos esta aclaración).
• Ejemplos comunes:
  • screen: Dispositivos con pantalla (monitores, tablets, smartphones, etc.).
  • print: Impresoras.
  • speech: Lectores de pantalla.
  • all: Todos los dispositivos.

and/or:

• Propósito: Utilizados para combinar varias condiciones.
  • and: Indica que todas las condiciones combinadas deben ser verdaderas para que se apliquen los estilos. En otras palabras, ambas condiciones deben cumplirse para que la consulta sea válida.
  • or: Indica que cualquiera de las condiciones puede ser verdadera para que se apliquen los estilos. En otras palabras significa que al menos una de las condiciones debe cumplirse para que la consulta sea válida. NOTA: En CSS, or se representa con una coma ,.

(condición):

• Propósito: Especifica la condición que se debe cumplir para que se apliquen los estilos implementados en el bloque de estilos CSS. Estas condiciones suelen referirse a características del dispositivo o la ventana gráfica.
• Ejemplos comunes:
  • (max-width: 768px): Se aplica cuando el ancho del viewport es como máximo 768 píxeles.
  • (min-width: 1024px): Se aplica cuando el ancho del viewport es al menos 1024 píxeles.
  • (orientation: landscape): Se aplica cuando la orientación de la pantalla es horizontal.
  • (min-resolution: 300dpi): Se aplica cuando la resolución mínima del dispositivo es 300 puntos por pulgada (dpi).

Bloque de estilos CSS { /* Estilos CSS */ }:

• Propósito: Contiene los estilos CSS que se aplicarán cuando se cumplan las condiciones especificadas en el media query.
• Ejemplo:

body {
    background-color: lightblue;
}
header, nav, main, footer {
    font-size: 14px;
}Lenguaje del código: CSS (css)

@media (max-width: 768px) {
    body {
        background-color: lightblue;
    }
    header, nav, main, footer {
        font-size: 14px;
    }
}Lenguaje del código: CSS (css)

@media screen and (max-width: 768px) {
    body {
        background-color: lightblue;
    }
    header, nav, main, footer {
        font-size: 14px;
    }
}Lenguaje del código: CSS (css)

@media print {
    .navigation {
        display: none;
    }
}Lenguaje del código: CSS (css)

@media (max-width: 768px) {
    body {
        background-color: lightblue;
    }
}Lenguaje del código: CSS (css)

3.2. Sintaxis de Media Queries combinados:

En esta sintaxis, se realiza una combinación de condiciones en Media Queries, lo cual nos permite crear reglas CSS más complejas y adaptables a una amplia gama de dispositivos y situaciones. En lugar de evaluar una sola característica, puedes combinar varias condiciones para definir estilos que se apliquen solo cuando se cumplan todos los criterios.

Explicación de sus componentes:

• (condición 1) y (condición 2): Como verás, los componentes son todos los mismos que la sintaxis del punto anterior 3.1. solo que se incorpora una condición mas que se debe cumplir:
  • Propósito: Especifican las condiciones bajo las cuales se aplican los estilos. Estas condiciones suelen referirse a características del dispositivo o la ventana gráfica.
  • Ejemplo:

@media screen and (max-width: 768px) and (orientation: landscape) {
    body {
        background-color: lightblue;
    }
    header, nav, main, footer {
        font-size: 14px;
    }
}Lenguaje del código: CSS (css)

EXPLICACIÓN de los componentes de este Media Quewry combinado:

• @media: Inicia la declaración de un media query.
• screen: Aplica los estilos solo a dispositivos con pantalla.
• and: Combina varias condiciones que deben cumplirse simultáneamente.
• (max-width: 768px): Se aplica cuando el ancho del viewport es como máximo 768 píxeles.
• (orientation: landscape): Se aplica cuando la orientación de la pantalla es horizontal.
• Bloque de estilos CSS { ... }:
  • body { background-color: lightblue; }: Cambia el color de fondo del cuerpo del documento a azul claro.
  • header, nav, main, footer { font-size: 14px; }: Ajusta el tamaño de la fuente de los elementos header, nav, main, y footer a 14 píxeles.

RESUMEN:

• @media: Declara un media query.
• tipo-de-medio: Define el tipo de dispositivo al que se aplican los estilos.
• and/or: Combina condiciones que deben cumplirse.
• (condición 1) y (condición 2): Especifica las condiciones a cumplir (características del dispositivo o la ventana gráfica).
• Bloque de estilos CSS: Contiene los estilos que se aplicarán si se cumplen las condiciones.

Estos componentes juntos permiten definir estilos CSS adaptativos, aplicando diferentes diseños y configuraciones en función de las características del dispositivo y el entorno de visualización.

4. ¿Cómo usar los Media Quey en CSS correctamente?

Aquí tienes un PASO A PASO detallado para implementar correctamente los media queries en tu proyecto web:

1. Entender el Diseño Responsivo:
2. Definir los Puntos de Quiebre (breakpoints) :
3. Escribir el CSS Base:
4. Agregar Media Queries para Cada Punto de Quiebre:
5. Usar Herramientas de Desarrollo para Probar el Diseño:
6. Optimizar las Media Queries:
7. Considerar el Rendimiento y la Accesibilidad:

4.1. Entender el Diseño Responsivo:

Antes de comenzar, es importante tener una comprensión clara de cómo quieres que tu diseño se adapte a diferentes dispositivos y tamaños de pantalla. Esto incluye definir los puntos de quiebre (breakpoints) donde el diseño debe cambiar.

4.2. Definir los Puntos de Quiebre (breakpoints) :

Los puntos de quiebre son los tamaños de pantalla específicos en los que deseas que tu diseño cambie. Los tamaños comunes son 320px, 480px, 768px, 1024px, y 1200px. Ejemplo:

• Teléfonos: 320px – 480px
• Tablets: 481px – 768px
• Pantallas de escritorio pequeñas: 769px – 1024px
• Pantallas de escritorio grandes: 1025px y superiores

4.3. Escribir el CSS Base:

Comienza escribiendo el CSS base que se aplicará a todos los dispositivos. Estos son los estilos predeterminados antes de aplicar cualquier media query.

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header, nav, main, footer {
    padding: 20px;
    margin: 10px;
    border: 1px solid #ccc;
}Lenguaje del código: CSS (css)

4.4. Agregar Media Queries para Cada Punto de Quiebre:

A continuación, agrega los media queries para los puntos de quiebre definidos. Dentro de cada media query, ajusta los estilos según sea necesario para ese tamaño de pantalla.

/* Para pantallas de 768px o menos */
@media (max-width: 768px) {
    body {
        background-color: lightblue;
    }
    header, nav, main, footer {
        font-size: 14px;
        padding: 10px;
    }
}

/* Para pantallas de 480px o menos */
@media (max-width: 480px) {
    nav {
        display: none;
    }
    main {
        font-size: 12px;
    }
}Lenguaje del código: CSS (css)

4.5. Usar Herramientas de Desarrollo para Probar el Diseño:

Utiliza las herramientas de desarrollo de tu navegador (por ejemplo, Chrome DevTools) para probar cómo se ve tu diseño en diferentes tamaños de pantalla. Puedes emular diferentes dispositivos y ajustar tus media queries en consecuencia.

4.6. Optimizar las Media Queries:

Asegúrate de que tus media queries no se superpongan innecesariamente y que el CSS sea lo más eficiente posible. Ordena tus media queries de manera lógica y agrúpalas si es necesario para mantener el código limpio y legible.

4.7. Considerar el Rendimiento y la Accesibilidad:

Asegúrate de que tu diseño responsivo no solo se vea bien, sino que también sea accesible y tenga un buen rendimiento. Evita cargar recursos innecesarios y asegúrate de que todos los elementos sean accesibles en todas las resoluciones.

CONCLUSIÓN: Implementar media queries correctamente implica planificar tu diseño responsivo, definir puntos de quiebre claros, escribir estilos base, y luego ajustar esos estilos dentro de media queries específicas para diferentes tamaños de pantalla. Probar y optimizar tu CSS asegura que tu sitio web sea accesible y funcione bien en todos los dispositivos.

5. ¿Puedo implementar estos Media Query desde WordPress?

Sí, puedes implementar media queries en una página web desarrollada en WordPress. WordPress es una plataforma muy flexible que permite la personalización del diseño y los estilos a través de temas y hojas de estilo CSS.

5.1. Paso a Paso: Usar el Personalizador de WordPress para Agregar Media Queries

5.1.1. Identificar los Selectores CSS

Antes de agregar media queries, necesitas identificar los selectores CSS a los que quieres aplicar los estilos responsivos. Puedes hacer esto utilizando las herramientas de desarrollo del navegador (como Chrome DevTools).

Cómo hacerlo:

1. Abre tu sitio web en el navegador.
2. Haz clic derecho sobre el elemento que deseas modificar y selecciona «Inspeccionar» (o «Inspect» en inglés).
3. En el panel de herramientas de desarrollo, podrás ver el código HTML y los estilos CSS aplicados al elemento seleccionado. Aquí, puedes identificar el selector CSS correspondiente.

Por ejemplo, si quieres cambiar el estilo del encabezado (header), identificarás que el selector CSS es header.

5.1.2. Acceder al Personalizador de WordPress

Ahora que tienes identificado el selector CSS, puedes acceder al Personalizador de WordPress para agregar tus media queries.

Cómo hacerlo:

1. Inicia sesión en el panel de administración de WordPress.
2. Navega a Apariencia > Personalizar.

5.1.3. Agregar CSS Adicional

Dentro del Personalizador de WordPress, encontrarás una sección llamada «CSS adicional» donde puedes agregar tus media queries.

Cómo hacerlo:

1. En el menú del Personalizador, busca y selecciona CSS adicional.
2. En el campo de texto que aparece, puedes pegar tus estilos CSS y media queries.

5.1.4. Agregar Media Queries

A continuación, pega tus media queries en el campo de «CSS adicional». Aquí tienes un ejemplo:

/* Estilos base */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header, nav, main, footer {
    padding: 20px;
    margin: 10px;
    border: 1px solid #ccc;
}

/* Media Query para pantallas de 768px o menos */
@media (max-width: 768px) {
    body {
        background-color: lightblue;
    }
    header, nav, main, footer {
        font-size: 14px;
        padding: 10px;
    }
}

/* Media Query para pantallas de 480px o menos */
@media (max-width: 480px) {
    nav {
        display: none;
    }
    main {
        font-size: 12px;
    }
}Lenguaje del código: CSS (css)

5.1.5. Guardar y Publicar

Después de agregar tus media queries:

1. Revisa la vista previa en el Personalizador para asegurarte de que los cambios se aplican correctamente.
2. Si todo se ve bien, haz clic en «Publicar» para guardar y aplicar tus cambios.

PREGUNTAS FRECUENTES Y RESUMEN: