Media queries más utilizadas: haz tus proyectos responsive

Actualizado el jueves, 22 junio, 2023

Hoy en día tener media queries en la definición de tus estilos CSS es casi obligatorio. En el post de hoy te explicaremos en que consisten y cuáles son las más utilizadas. Una media querie no deja de ser una regla en nuestro CSS que solo se aplicará cuando se cumplan unas condiciones determinadas.

Seguramente te preguntaras que condiciones se comprueban en las media queries. La respuesta es sencilla, gracias a la información que devuelve tu navegador se pueden comprobar los aspectos más importantes, como por ejemplo:

• El tamaño de la pantalla (Ancho y alto)
• La orientación de la pantalla (importante en dispositivos móviles)
• La resolución
• …

Las media queries se introdujeron en las especificaciones de CSS3, y hoy en día, prácticamente todos los navegadores las soportan. Recuerda que pueden emplear la página CanIUse para conocer los navegadores que soportan determinadas reglas CSS.

Además de las propiedades comentadas, con las media queries, podemos descubrir el soporte sobre el que se va a visionar una web, en otras palabras, si se va a ver en una pantalla o imprimir. Lo más común es realizar definiciones para pantalla, pero al final de este artículo te mostraremos las capacidades que tiene para mejorar la impresión de páginas web.

Queries de pantalla

Ya te hemos hablado en más de una ocasión en que consiste esto del diseño responsive y por qué es importante hoy en día. En el principio de los tiempos la forma de consumir una web era casi única: Delante de una pantalla de ordenador de rayos catódicos de 600 px por 400 px. Con el paso de los años, esto fue variando hasta la diversidad de dispositivos que tenemos hoy en día.

Es muy importante que tu web se vea correctamente tanto en una superpantalla como en el móvil más diminuto. De ahí, la creación de las media queries. Existen muchas formas de diseñar una web, pero la más aceptada recientemente es la vertiente Mobile First.

En el diseño Mobile First, se maqueta el contenido para su correcto visionado en un móvil, para después a través de media queries adaptarlo al resto de dispositivos.

Uso de media Queries

Bien, ya te ha quedado claro lo que son las media queries, pero ¿Cómo se emplean? Es muy sencillo, únicamente tienes que introducir la palabra @media, y entre paréntesis la condición que se debe cumplir, y dentro de las llaves introducir las propiedades (con los selectores oportunos) que se van a modificar. Algo tal que así:

@media (condicion){
//Reglas CSS
}

Gracias a esto podremos definir estilos concretos para tamaños de pantalla determinados. Por norma general, los tamaños que se suelen definir son tres:

Recuerda además que es posible combinar condiciones a través de la palabra reservada and. Esto multiplica las posibilidades de definición de casos, por ejemplo:

@media (min-width: 900px) and (max-width: 1400px) {
 .anuncio {
 display: none;
 }
 }

Con esta instrucción podemos impedir que se vea el elemento de clase anuncio, en pantallas con un tamaño entre 1400 y 900 píxeles. Recuerda que una de las máximas en diseño responsive es no mostrar elementos que no sean estrictamente necesarios y así simplificar la navegación.

Conflictos en media Queries

Como puedes observar, definir media Queries es muy sencillo, pero al igual que pasa con el resto de reglas CSS, pueden producirse conflictos. En este caso, y como bien indica su nombre (Hoja de Estilos en Cascada) Los conflictos se resuelven en cascada, se aplicaría la última norma definida en el documento CSS.

Extra tip: Queries impresión

Te preguntarás ¿Quien imprime una web a día de hoy?. Quizás tengas razón, pero hace no mucho era una práctica habitual, sobre todo en webs de educación o documentación de un producto. Además, recuerda que a día de hoy, imprimir, no siempre significa imprimir en papel, sino que puede ser imprimir la web a un formato PDF.

Cambiar el color de los textos

¿Cuántas veces te has quedado sin cartucho de color en tu impresora? Por ello, y porque es más barato imprimir en blanco y negro, es buena idea cambiar el color del texto a negro. En web, es interesante remarcar los hiperenlaces o palabras clave en otro color, para que así sean más visuales.

En un documento no vas a hacer click en ningún sitio, por lo que puedes “aplanar” ese texto. Para realizarlo únicamente tienes que poner en la query, la palabra print:

@media print{
    p, a{
        color: black;
    }
}

De esta forma podrás cambiar el color de impresión, de los elementos que te interesen, también puedes pasar tus imágenes a blanco y negro.

@media print{
    img{
        filter: grayscale(100%);
    }
}

Otra opción interesante en impresión es ocultar los anuncios que puedan tener la página. Tal como explicamos en las media queries de pantalla, es muy sencillo ocultarlos con la instrucción display: none. Los usuarios de tu web que la quieran imprimir, te lo agradecerán.

Como puedes ver, a través de las media queries podrás conseguir mejorar la experiencia de usuario de tu web, gracias a reglas específicas adaptadas a cada dispositivo y uso. Si tienes dudas sobre las media queries, recuerda que tienes documentación al respecto en w3school y la documentación de mozilla. ¡Hasta la próxima!