Tabla de contenidos
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.
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) { ... }
0
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 |
Las media queries nos permiten utilizar operadores lógicos para comprobar si se cumple una condición.
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) { ... }
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) { ... }
Define las media queries de tu proyecto web. Aplica un mínimo de tres puntos de ruptura.