Descripción
La regla @media de CSS nos permite adaptar nuestros sitios web a diferentes tipos de dispositivos o medios de salida. Esta regla es fundamental para crear diseños responsive que se ajusten a diferentes tamaños de pantalla, resoluciones o incluso medios de impresión.
Sintaxis
@media =
@media <media-query-list> { <rule-list> }
Parámetros
- media-query-list, una lista de consultas de medios que especifica las condiciones bajo las cuales se aplicarán las reglas CSS. Puede incluir tipos de medios (como screen, print) y características de medios (como width, orientation)
- rule-list, el conjunto de reglas CSS que se aplicarán cuando se cumplan las condiciones especificadas en la media-query-list. Estas reglas pueden modificar cualquier propiedad CSS válida
Media-Query-List
La lista de la media-query puede tener tres tipos de elementos fundamentales que determinan cómo y cuándo se aplicarán las reglas CSS:
- Tipo de medio, que especifica el dispositivo o medio de salida al que se aplicarán las reglas, como pantallas, impresoras o dispositivos de voz. Valores como
screen,print,tv,aural,all,… - Características del medio, que definen las condiciones específicas del dispositivo como el ancho, alto, orientación, resolución o capacidad de color
- Operadores Lógicos, que permiten combinar múltiples condiciones mediante and, not y only para crear reglas más específicas y flexibles
Características de las Media-Queries
Dentro de las características del medio para las media-queries tenemos:
- any-hover
- any-pointer
- aspect-ratio
- color
- color-gamut
- color-index
- device-aspect-ratio
- device-height
- device-posture
- device-width
- display-mode
- dynamic-range
- forced-colors
- grid
- height
- hover
- inverted-colors
- monochrome
- orientation
- overflow-block
- overflow-inline
- pointer
- prefers-color-scheme
- prefers-contrast
- prefers-reduced-data
- prefers-reduced-motion
- prefers-reduced-transparency
- resolution
- scan
- scripting
- shape
- update
- video-dynamic-range
- width
Ejemplo
Un ejemplo común de uso de @media es adaptar el diseño según el ancho de la pantalla:
@media screen and (max-width: 768px) {
.container {
width: 100%;
padding: 0 15px;
}
.nav {
display: none;
}
}
En este ejemplo, cuando la pantalla es menor a 768px, el contenedor ocupará todo el ancho disponible y el menú de navegación se ocultará.
