Lección 6: Media queries

Las media queries permiten intercambiar estilos de una página a partir de unas condicionales, como: el ancho de la pantalla, la densidad de pixeles, la orientación del dispositivo, colores, etc. Son una parte fundamental del diseño responsive ya que nos permiten adaptar el diseño a diferentes dispositivos y pantallas.

Sintaxis

Las media queries posee su propia estructura. Por un lado se encierran los estilos en un @media, una condición y {}. A continuación, dentro de las llaves, se escriben los estilos que se aplicarán cuando se cumpla la condición.

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

Pongamos un caso rápido. Queremos aplicar un fondo de color rojo cuando el ancho de la pantalla sea menor a 600px. Podemos escribir:

@media (width < 600px) {
    body {
        background-color: red;
    }
}

Una alternativa popular y antigua es usando max-width y min-width. En este caso, el siguiente código es equivalente al anterior sería @media all and (max-width: 600px) { ... }. No obstante, la sintaxis anterior es más flexible, moderna y fácil de comprender.

Si adicionalmente queremos que el color de fondo rojo con una anchura de 600px en adelante pero verde en 600px o menos, podemos escribir:

body {
    background-color: red;
}

@media (width < 600px) {
    body {
        background-color: green;
    }
}

Si usamos anidación, podremos compactar el código:

body {
    background-color: red;
    @media (width < 600px) {
        background-color: green;
    }
}

Hemos aplicado un color de fondo rojo por defecto, y luego hemos sobrescrito ese estilo con un color verde cuando el ancho de la pantalla sea inferior a 600px. El orden de la cascada importa. El media query se aplica a todos los estilos que se encuentren dentro de él. Es recomendable situarlo al final del archivo CSS o debajo del selector al que se aplica.

Ahora añadiremos otro caso de uso. Queremos cumplir los siguientes requisitos:

• Si el ancho de la pantalla es menor a 600px, el color de fondo será rojo.
• Si el ancho de la pantalla es mayor a 600px pero inferior a 1000px, el color de fondo será verde.
• Si el ancho de la pantalla es mayor a 1000px, el color de fondo será azul.

Lo podemos implementar con los siguientes estilos:

/* Estilos por defecto: azul */
body {
    background-color: blue;
}

/* Estilos para pantallas menores a 600px: rojo */
@media (width < 600px) {
    body {
        background-color: red;
    }
}

/* Estilos para pantallas entre 600px y 1000px: verde */
@media (600px <= width < 1000px) {
    body {
        background-color: green;
    }
}

Si usamos anidación, se vería así:

body {
    background-color: blue;
    @media (width < 600px) {
        background-color: red;
    }
    @media (600px <= width < 1000px) {
        background-color: green;
    }
}

Marcamos estilos diferentes para para pantallas pequeñas, medianas y grandes. Debes ser consciente que cada dispositivo posee una resolución diferente, aunque a nosotros solo nos interesa el ancho ya que la altura es infinita (tal alto como sea el scroll de la página). Por ejemplo, un iPhone SE de segunda generación tiene una resolución de 375px de ancho, un iPad tiene una resolución de 810px de ancho, un monitor de 13 pulgadas tiene una resolución aproximada de 1280px de ancho, un monitor en HD tiene una resolución de 1920px de ancho, un monitor 4K tiene una resolución de 3840px de ancho… y así podríamos seguir. ¿Cómo podemos definir estilos para cada uno de estos dispositivos sin perder la cabeza?

Generalmente se marcan unas líneas imaginarias y se presupone que todo lo que entra en el espectro es un dispositivo concreto. Puedes usar como referencia:

No hay mejor forma de testear una web que usando dispositivos reales, busca todo lo que tengas a tu alcance. También las vista de diseño adaptables de los navegadores son una buena ayuda (puedes activarla pulsando Ctrl + Shift + M en Firefox o Ctrl + Shift + I en Chrome).

Screen

Es posible añadir una condición para que el media query para diferenciar entre pantallas e impresoras. Para ello, se usa la palabra clave screen o print seguida de un and y la condición.

El siguiente media query se aplica solo en pantallas:

@media screen and (width < 600px) {
  body {
    background-color: red;
  }
}

Y el siguiente media query se aplica solo en impresoras:

@media print and (width < 600px) {
    body {
        background-color: red;
    }
}

Es útil cuando buscamos eliminar elementos innecesarios en la versión impresa de una página web.

Monochrome

Existen dispositivos que son monocromáticos, es decir, que solo pueden mostrar un color (escalas de grises habitualmente). Como por ejemplo las pantallas de tinta electrónica, las impresoras, etc.

Para ellos, existe la condición monochrome que permite aplicar estilos en función de la cantidad de colores que puede mostrar el dispositivo.

@media (monochrome) {
    body {
        background-color: red;
    }
}

Utilízalo para ajustar el contraste de los colores en función de la cantidad de colores que puede mostrar el dispositivo.

Orientation

La condición orientation permite aplicar estilos en función de la orientación del dispositivo. Puede ser portrait (vertical) o landscape (horizontal).

@media (orientation: portrait) {
    body {
        background-color: red;
    }
}

Realmente interesante para acercar botones y elementos de navegación a los pulgares de los usuarios en dispositivos con pantallas verticales.

Algunas ayudas

Clases para mostrar elementos en dispositivos concretos

En todo diseño hay elementos que solo necesitamos mostrar en resoluciones, o dispositivos, concretos. Por ejemplo, el botón de hamburguesa (se le denomina al icono que tiene 3 rayas horizontales para abrir menús) que es solo necesario en pantallas pequeñas, o el botón de “volver arriba” para pantallas grandes. Por ello podemos utilizar mini ayudas, en forma de clases, para mostrar u ocultar elementos en función de la resolución.

Puedes utilizar las siguientes clases CSS con tal fin:

.is-in-desktop {
    display: none;
    @media (1000px < width) {
        display: inherit;
    }
}

.is-in-tablet {
    display: none;
    @media (600px <= width < 1000px) {
        display: inherit;
    }
}

.is-in-mobile {
    display: none;
    @media (width < 600px) {
        display: inherit;
    }
}

Si yo deseo que un botón se muestre solo en dispositivos móviles, puedo escribir:

<button class="is-in-mobile">Abrir menú</button>

Lo ocultará en tablet y escritorio pero no en smartphones.

Además las puedes combinar entre sí. Por ejemplo, si quiero que un botón se muestre en tablet y escritorio, pero no en móvil, puedo escribir:

<a href="#top" class="is-in-tablet is-in-desktop">Volver arriba</a>

Si no añades ninguna clase, el elemento se mostrará en todos los dispositivos.

Implementación en SASS

Si trabajamos con SASS, podemos usar un par de variables y Mixins para lograr unos estilos más semánticos.

A partir del siguiente código:

// Smartphones: 0px - 600px
$breakpoint--s: 600px
// Tablets: 600px - 1000px
$breakpoint--m: 1000px

@mixin media ($breakpoint)
    @media all and (max-width: $breakpoint)
        @content

@mixin media--smartphone ()
    @include media($breakpoint--s)
        @content

@mixin media--tablet ()
    @include media($breakpoint--m)
        @content

Puedo hacer que un botón sea verde, pero rojo en smartphone y amarillo en tablet.

.button
    color: green
    @include media--smartphone()
        color: red
    @include media--tablet()
        color: yellow

Al compilarse generaría el siguiente CSS con los medias queries y los puntos de cambio:

.button {
  color: green;
}

@media (width < 600px) {
    .button {
        color: red;
    }
}

@media (width < 1000px) {
    .button {
        color: yellow;
    }
}

O su versión anidada:

.button {
    color: green;
    @media (width < 600px) {
        color: red;
        }
    @media (width < 1000px) {
        color: yellow;
    }
}

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Publicar ¡Publicado! ¡Ups! Algo ha fallado, ¿Reintentamos? Enviando...

Escribe el primer comentario