Qué es una media query

Una media query es una regla o conjunto de reglas CSS que se ejecutan para unas condiciones específicas de la pantalla (tamaño, resolución, orientación, etc.)

Cómo se usan las media query

Las media query es la base del diseño web responsive, ya que permite, entre otras cosas, modificar propiedades de elementos para que la información de nuestra web se presente de forma correcta, bien se visite desde un monitor grande o desde un teléfono con una pantalla pequeña.

Dentro de las media query, algunas propiedades que se suelen modificar suelen ser:

  • Jugar con la visibilidad de elementos display:none
  • Subir o bajar elementos margin-top:10px
  • Acercar o separar elementos padding-left:20px
  • Adecuar el tamaño de algún título font-size:0.9rem
  • Retocar el ancho de una imagen width:90px
  • Variar el alto de una imagen height:50px

La premisa para usarlas es sencilla:

  1. Definir la resolución donde aplicar un CSS
  2. Declarar las clases o ID  donde aplicar un estilo
  3. Indicar los cambios de estilo CSS correspondientes

Ejemplos de uso de Media Queries

Ejemplo 1

Se necesita ajustar la altura del logotipo, para que aparezca correctamente, a partir de un ancho de 768px.

Nueva forma de hacer media queries con CSS:

Copiar código

Antigua forma de realizar media queries con CSS, pero aún utilizable:

Copiar código

Ejemplo 2

En resoluciones menores de 420px, los h1 se ven muy grandes y alguna palabra muy larga sobresale de la pantalla, haciendo que no se lea correctamente.

Nueva forma de hacer media queries con CSS:

Copiar código

Antigua forma de realizar media queries con CSS, pero aún utilizable:

Copiar código

Ejemplo 3

Se quiere separar los enlaces que hay en el footer entre ciertas resoluciones, ya que se juntan demasiado.

Nueva forma de hacer media queries con CSS:

Copiar código

Antigua forma de realizar media queries con CSS, pero aún utilizable:

Copiar código

Como has podido ver, la idea es jugar para que en determinadas resoluciones se apliquen los estilos CSS que se necesiten.

Cuando se usa una condición tipo a @media screen and (min-width:1025px) { algo de CSS } esta sentencia se ejecutará en resoluciones de 1025px (incluido) en adelante.

En el caso de @media screen and (max-width:900px) { algo de CSS } –> Se ejecutará desde 0px hasta 900px.

Cuando se quieren utilizar dos tamaños,  se debe poner primero el min-width y luego el max-width, definiendo así algo tipo a: Aplica estos estilos a tamaños entre 800px y 1200px –> @media screen and (min-width:800px) and (max-width:1200px) { algo de CSS }

Hasta dónde debo revisar si mi página web es responsive

Cualquier web debe presentar sus contenidos correctamente a 320px de ancho y de ahí en adelante.

Acualmente, este valor lo proporciona el iPhone 5SE, cuya resolución de pantalla es de 320px, siendo la más baja del mercado dentro de los actuales smartphones.

Dónde introducir las media query

Las media query se trata de código CSS, por ello, se deben ser incluidas en donde tu tema o WordPress te permita incluir CSS personalizado.

Si usas Avada, aquí te lo explico.

Si usas un tema hijo o a medida, aquí tienes como cargar una hoja de CSS externa a tu WordPress.

El futuro de las media query

Gracias al uso de flex y de grid se pueden hacer diseños complejos y que son completamente responsive,

El uso de frameworks como Boostrap y Tailwind, entre otros, ya incorporan clases para alterar los diseños sin escribir CSS

Cada vez se debiera de utilizar menos estas media queries… No obstante siguen siendo usadas para pequeños retoques o detalles.

Más información sobre las media queries

¡Valora este artículo y ayúdame a mejorar la calidad del blog, si no te ha servido, déjame un comentario para revisarlo!
(Votos: 1 Promedio: 5)