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

Media queries en CSS

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.

1. Media queries para definir el ancho máximo de la pantalla

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";
    }
}

La siguiente media query especifica una hoja de estilo para ser utilizada cuando la ventana tiene un ancho entre 450 y 800 píxeles:

@media (min-width: 450px) and (max-width: 800px) { 
      ... 
}

Ver ejemplo completo:

0

2. Otras propiedades o condiciones

A parte del ancho hay muchas otras propiedades que se pueden comprobar para aplicar o no los 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

3. Operadores lógicos en media queries

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 (monochrome) { ... }

Ejercicios propuestos

Actividad 2

Define las media queries de tu proyecto web. Aplica un mínimo de tres puntos de ruptura.