Media queries CSS para cumplir las necesidades del diseño responsive

Las media queries se introdujeron en CSS3 para dar respuesta a las necesidades del diseño web responsive. Mediante ellas podemos definir estilos condicionales, aplicables únicamente en determinadas situaciones. El uso más extendido de las media queries es para establecer estilos diferentes para cada ancho de pantalla.

Contenidos del artículo

1. Media queries en CSS para cada ancho de pantalla

Para definir una media query en CSS se utiliza la regla @media en la hoja de estilos. Se pueden definir todas las media queries que necesitemos según los diseños para cada ancho de pantalla.

¡Ojo! Como vimos en la unidad anterior, es necesario enlazar la hoja de estilo externa en el documento HTML.

Para definir los estilos para cada ancho de pantalla utilizaremos puntos de ruptura. Todos los estilos que no se incluyan dentro de una media query se verán en todos los tamaños de dispositivo.

Existen varias formas de definir el ancho del dispositivo dentro de la regla @media:

1.1. Media query indicando el ancho mínimo de pantalla

Todos los estilos que se incluyan en el interior de la siguiente media query serán utilizados en pantallas que tengan un ancho mínimo de 768px (punto de ruptura de 768px).

@media (min-width: 768px) {
  /* Estilos para pantallas con un ancho mínimo de 768px */
}

1.2. Media query indicando el ancho máximo de pantalla

Todos los estilos que se incluyan en el interior de la siguiente media query serán utilizados en pantallas que tengan un ancho máximo de 767px (punto de ruptura de 767px).

@media (max-width: 767px) {
  /* Estilos para pantallas con un ancho máximo de 768px */
}

1.3. Media query combinando múltiples condiciones

Es posible combinar múltiples condiciones en una media query para aplicar estilos solo cuando se cumplan todas las condiciones. Todos los estilos que se incluyan en el interior de la siguiente media query serán utilizados en pantallas que tengan un ancho entre 768px y 1024px (puntos de ruptura de 768px y 1024px).

@media (min-width: 768px) and (max-width: 1024px) {
  /* Estilos para pantallas con un ancho entre 768px y 1024px */
}

2. Ejemplos de Media queries para definir el ancho del dispositivo

Ejemplo 1:

Supongamos que queremos aplicar un estilo diferente en pantallas de ancho superior a 1024px, inferior a 1024px e inferior a 480px, tendríamos las siguientes media queries:

.click:after {
    content:"En pantalla grande";
}
@media (max-width: 1024px) {
    .click:after {
        content:"Tablet";
    }
}
@media (max-width: 480px) {
    .click:after {
        content:"Movil";
    }
}

Ver ejemplo completo:

Ejemplo 2:

La primera media query especifica una hoja de estilo para ser utilizada cuando la ventana tiene un ancho entre 450 y 800 píxeles y la segunda media query para pantallas menores a 449 píxeles.

.click:after {
    content:"En pantalla grande";
}
@media (min-width: 450px) and (max-width: 800px) { 
       .click:after {
        content:"Tablet";
    }
}

@media (max-width: 449px) {
    .click:after {
        content:"Movil";
    }
}

Ver ejemplo completo:

2.1. Otras propiedades o condiciones

Además del ancho hay muchas otras propiedades que se pueden utilizar para aplicar o no estilos. Las siguientes son algunas de ellas:

Nombre	Descripción
`width`	Anchura del viewport
`height`	Altura del viewport
`aspect-ratio`	Relación de aspecto anchura-altura del viewport
`orientation`	Orientación del viewport
`resolution`	Densidad de píxeles del dispositivo
`scan`	Proceso de escaneo del dispositivo
`grid`	Si el dispositivo es grid o bitmap
`update-frequency`	Velocidad de actualización del dispositivo para modificar la apariencia del contenido
`overflow-block`	Cómo maneja el dispositivo el contenido que excede los límites del viewport a lo largo del eje de bloque
`overflow-inline`	Cómo maneja el dispositivo el contenido que excede los límites del eje inline
`color`	Componente de número de bits por color del dispositivo, o cero si el dispositivo no es a color
`color-index`	Número de entradas en la tabla de búsqueda de color del dispositivo, o cero si el dispositivo no usa una tabla
`monochrome`	Bits por píxel en el buffer de marco monocromático del dispositivo, o 0 si el dispositivo no es monocromático
`hover`	Si se puede posicionar el puntero sobre los elementos

Tabla 1. Propiedades media queries

2.2. Operadores lógicos en media queries

Como hemos visto, las media queries nos permiten utilizar operadores lógicos para comprobar si se cumple una condición.

Operador AND

El siguiente código aplicará estilos cuando la pantalla tenga un ancho mínimo de 700px y la orientación de la misma sea horizontal (landscape).

@media (min-width: 700px) and (orientation: landscape) { ... }

Operador NOT

El siguiente código aplicará estilos cuando no se cumpla la condición especificada, es decir a cualquier elemento que no sea una pantalla convencional ni sea monocromo.

@media not screen and not (monochrome) { ... }