Media Queries
Sintaxis
Las media queries consisten de un tipo de medio opcional y una o más expresiones de características de medios, que se resuelven en verdadero o falso. Varias consultas se pueden combinar utilizando operadores lógicos.
No distinguen entre mayúsculas y minúsculas
El resultado de la consulta es verdadero cuando el tipo de medio (si se especifica) coincide con el dispositivo en el que se está mostrando el documento y todas las expresiones en el media query son verdaderas. En este caso, se aplica los estilos correspondientes, siguiendo las reglas usuales de CSS.
Las consultas sobre tipos de medios desconocidos son siempre falsas.
Queries
Las queries son insensibles a las mayúsculas y minusculas y aquellas que contengan medios desconocidos, siempre daran como resultado Falso. Por consiguiente no se aplicarán.
Media Features
Algunos ejemplos del tipo Media Feature son:
- width | min-width | max-width Ancho especifico
- height | min-height | max-height Alto especifico
- device-width | min-device-width | max-device-width Ancho especifico del dispositivo
- device-height | min-device-height | max-device-height Alto especifico del dispositivo
- aspect-ratio | min-aspect-ratio | max-aspect-ratioRelación de aspecto
- device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio Rel. aspecto del dispositivo
- resolution | min-resolution | max-resolutionResolución
- Otros: color | min-color | max-color | color-index | min-color-index | max-color-index | monochrome | min-monochrome | max-monochrome | scan | grid
expression: ( <media_feature> [: <value>]? )
Media Types
También se puede consultar por el tipo de medio:
| Valor | Descripción |
|---|---|
| all | Es el valor por defecto, y es usado para todos los tipos de dispositivos. |
| Usado por impresoras | |
| screen | Usado por pantallas de computadoras, tablets, teléfonos móviles, etc. |
| speech | Usado por lectores de pantallas que "Leen" la página en voz alta. |
Operadores lógicos
Se pueden redactar queries utilizando operadores lógicos, incluyendo not,and y only. Además se puede combinar múltiples queries en una lista separada por comas múltiples; si cualquiera de las queries en la lista es verdadera, la hoja de estilo asociada es aplicada. Esto es equivalente a una operación lógica "or".
and
El operador and es usado para colocar juntas múltiples funciones multimedia
@media (min-width: 700px) and (orientation: landscape) { ... }
@media screen and (min-width: 700px) and (orientation: landscape) { ... }
not
El operador not aplica a todo el query y retorna verdadero si es posible y sino retorna falso (como por ejemplo monochrome en un monitor a color o una ventana con un ancho mínimo de min-width: 700px en un monitor de 600px).
Un not negara un query si es posible, pero no a todos los query posibles si están ubicados en una lista separada por comas.
@media not all and (monochrome) { ... }
Significa que en realidad se evalúa así:
@media not (all and (monochrome)) { ... }
only
El operador only previene que navegadores antiguos que no soportan queries con funciones que apliquen a los estilos asignados:
<link rel="stylesheet" media="only screen and (color)" href="Ejemplo.css" />
Ejemplos
El siguiente ejemplo, muestra como definirle el fondo del elemento body de color azul, haciendo uso de un selector de nombre, pero este solo será aplicado cuando la ventana del navegador, tenga 600px de ancho o menos y que
@media only screen and (max-width: 600px) {
body {
background-color: blue;
}
}
El siguiente ejemplo muestra un menú que flotará a la izquierda de la página si la ventana gráfica tiene 480 píxeles de ancho o más (si la ventana gráfica tiene menos de 480 píxeles, el menú estará en la parte superior del contenido)
@media screen and (min-width: 480px) {
#leftsidebar {
width: 200px;
float: left;
}
#main {
margin-left: 216px;
}
}
Ejemplo funcional
Debajo encontraran un cuadro, el cual sufrirá modificaciones en referencia a los estilos aplicados, dependiendo del tamaño de maximo de la ventana del navegador para mostrar contenido.
Para realizar la prueba, siga las indicaciones descritas en el siguiente cuadro, o utilize la herramienta para desarrolladores, presionando la tecla F12 y modifique el ancho de la misma.
Cambie el tamaño de la ventana, y notará que al achicarla, este sufrirá cambios con respecto al fondo, tamaño y color de letra. Verde si es inferior a inferior a 1000px y azul si es inferior a 600px.