Resumen
Retorna un nuevo objeto MediaQueryList que representa los resultados analizados de la cadena media query .
Sintaxis
mql = window.matchMedia(mediaQueryString)
Donde mediaQueryString es una cadena que representa al media query para devolver un nuevo objeto MediaQueryList
Ejemplo
if (window.matchMedia("(min-width: 400px)").matches) {
/* the viewport is at least 400 pixels wide */
} else {
/* the viewport is less than 400 pixels wide */
}
Este código le permite manejar las cosas de forma diferente cuando la ventana es muy estrecha.
Consulte Probando media queries para ver ejemplos adicionales.
Especificaciones
| Especificación | Estado | Comentario |
|---|---|---|
| CSS Object Model (CSSOM) View Module La definición de 'Window.matchMedia()' en esta especificación. |
Working Draft | Definición initial |
Compatibilidad de navegadores
We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
| Funcionalidad | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Soporte básico | 9 | (Yes) | 6.0 (6.0) | 10 | 12.1 | 5.1 |
| Funcionalidad | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Soporte básico | 3.0 | (Yes) | 6.0 (6.0) | Sin soporte | 12.1 | 5 |