Tabla de contenidos
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 screen and (max-width: 1024px) {
.click:after {
content:"Tablet";
}
}
@media screen and (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 screen and (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.