Media Queries en CSS ¿Cómo funcionan?

Las media queries son una sintaxis especial para CSS que nos permite definir unos estilos que solo se aplicarán en el caso de que se cumplan unas condiciones definidas. Podemos asimilarlos a unas líneas de código opcional, que sólo se mostrarán para algunos usuarios o dispositivos.

Media Queries en CSS

Media queries y diseño responsive. La revolución del diseño web móvil.

En un momento donde el tráfico móvil se multiplica cada año, ya no servían las webs estáticas diseñadas para mostrarse en una resolución concreta (¿recuerdas aquello de web diseñada para mostrarse en 600px x 480px?). Era necesario adaptar los diseños a unas dimensiones concretas para que el usuario recibiera la información web en su dispositivo sin tener de hacer zoom para leer los textos.

En este momento surgen dos modos de trabajar. La primera abogaba por tener dos versiones de la misma web, una para escritorio y otra para móvil. En la mayoría de los casos no están conectadas entre sí. Esto era costoso de mantener (dos webs) y además no siempre se mostraba el mismo contenido y diseño a ambos usuarios.

La segunda forma de trabajar es usar un mismo diseño para ambas resoluciones. Un diseño que se pudiera adaptar a unas determinadas resoluciones o ser flexible en su totalidad, independientemente del contenido y diseño que tuvieran. A esta nueva forma de trabajar se le denominó diseño web responsive.

Y como el encargado del diseño en la web es el CSS, surgió un nuevo elemento capaz de incorporar esta flexibilidad a la hoja de estilos: las media queries, que pueden abarcar porciones de código que sólo se aplicarán según que condiciones: si la resolución de pantalla es pequeña, si es muy grande, si el dispositivo está en posición horizontal…

Sintaxis de una media query. Cómo funciona

Sintaxis de una Media Query en CSS

Las media queries actúan como contenedor de las reglas y selectores a aplicar, por lo tanto, todo lo que engloba empieza con la apertura de una llave y termina con el cierre de la misma. En cuanto a la sintaxis, una media query siempre comienza con el indicador de @media, seguido de un mediatype.

@media not|only mediatype and|not|only (media feature) {
  .my-code { … }
}

Este mediatype es el encargado de seleccionar que tipo de formato será objeto de estas reglas. Aquí podemos decidir entre todos, impreso, pantalla o speech, útil para los equipos adaptados y accesibles.

Con los operadores not y only podemos jugar para agrupar o excluir un tipo de mediatype concreto.

Media Type en Media Query en CSS

El segundo parámetro de una media query en CSS es el media feature, donde indicamos al navegador que condición debe cumplir el dispositivo de salida especificado anteriormente para que la condición sea verdadera y se aplique este código contenido en nuestra media query.

Los media features más comunes son los referidos a las dimensiones de pantalla del dispositivo, pudiendo establecer el alto y ancho en el que se aplicarán (con height y width), o lo que es más interesante, a partir de que ancho o alto se aplicarán (con min/max-width y min/max-height)

Media Feature en CSS para Diseño Web responsive

Aunque también las hay más complejas, como por ejemplo aquellas combinadas que la orientación del dispositivo (landscape o portrait) o incluso las que definen el ratio de píxeles de la pantalla, como device-pixel-ratio, muy útil para definir estilos y CSS para las pantallas retinas, por ejemplo algunos iPads o iPhones. Aquí más información sobre las especificaciones.

Media Features avanzadas en CSS

Cómo funciona una media query. Ejemplo

El funcionamiento en el navegador es muy sencillo. Simplemente aplicará el código que esté incluido en una media query sobrescribiendo el heredado. Con esto es como si estableciésemos una capa sobre otra, con cierta transparencia, ya que no eliminamos del todo el código general de la hoja de estilos CSS.

Un ejemplo, queremos que se muestre un código concreto solo en pantallas y con una resolución menor a 400px. El código resultante sería:

@media screen and (max-width: 400px) { … }

Ejemplo en Media Quiey

Mobile first: cómo usar las media queries de forma correcta

Una de las dudas principales que se plantean a la hora de usar las media queries es si definir el estilo general del CSS para escritorio y reservar los condicionales para los móviles o hacerlo a la inversa. Estamos hablando de las corrientes Desktop First (escritorio primero) y Mobile First (móvil primero)

Media-Queries para Diseño Mobile First

Se ha discutido largo y tendido sobre esto, y poca gente duda ya que lo más interesante es trabajar con mobile first, es decir, tener unos estilos para móvil como base (pequeñas resoluciones) e ir creciendo poco a poco añadiendo media queries para dispositivos más grandes gracias al mediatype min-width.

Con esto conseguimos crear una versión muy liviana para los usuarios móviles (donde el navegador solo tiene que aplicar las primeras líneas de CSS) mientras que la carga de leer todo el conjunto sobrescribiendo las líneas marcadas en las media queries queda para los dispositivos de mayor resolución, que se entienden van a tener una conexión a internet más rápida y mayor velocidad de procesamiento de dichos condicionales.

En definitiva, una herramienta muy útil que podemos usar en nuestra hojas de estilos CSS para adaptarnos a cualquier dispositivo y resolución. Piensa en tu web como si fuera agua, y que sea flexible para poder encajar en un vaso, una copa, una botella o una piscina. Be water my friend!

Comentarios (9)

  1. Interesante. Esto siempre hay que tenerlo muy presente. A pesar de que por ejemplo trabajar con WordPress y sus themes premium facilitan mucho la vida y todo es muy «auto-responsivo» está muy bien conocer bien el terreno de CSS, siempre hay algo que tocar y hay que responder a cualquier exigencia del cliente personalizada.

  2. Hola Ricardo,

    En cuanto a las imágenes para una web hecha con código, ¿cuál sería la mejor solución para no sobrecargarla en versiones para móvil, pero pudiendo emplear imágenes grandes en versiones de escritorio?

    Muchas gracias.

    1. Saludos Saul,

      puedes usar tanto el elemento html picture como el atributo srcset para definir varios tamaños de imagen según que resolución cargando una u otra. Hablamos de ello en la presentación de la WordCamp de Barcelona (puedes ver las transparencias aquí). Para más info y ejemplos esta web es muy interesante.

      Gracias por comentar!

      1. Muchas gracias Ricardo,

        No conocía ninguna de estas 2 opciones.
        Si no las he entendido mal el atributo srcset es para una misma imagen en distintos tamaños y el elemento picture para distintas imágenes dependiendo de la resolución. ¿no?

        Luego está el tema del archivo .js que comentas, que parece mucho más compatible con todos los navegadores, pero ahí estoy un poco más perdido.

        Muchas gracias de nuevo.

        1. Si exacto Saul, la única diferencia es que con el atributo srcset el navegador se encarga de mostrar una u otra imagen según la resolución que tenga y con picture por el momento hay que indicarle manualmente las resoluciones.

          Si, con esa librería js se consigue compatibilidad casi total.

          Suerte!

  3. Fantastico Resumen.
    Muy visual , didáctico y sencillo.

    1000 veces mejor que lo que expusieron mis profesores de desarrollo de interfaces y web.

  4. Buenas tardes, interesante discusión sobre el manejo front-end de WordPress. Me gustaría saber más a fondo sobre la inclusión de HTML5, y JS para complementar lo de CSS que se publicó en el foro. Aprecio mucho que me des una respuesta en la brevedad. Feliz inicio de fin de semana. Saludos desde Colombia. !!!!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *