CSS que determina la consulta de medios activos

Question

En Javascript hay una manera directa (sin involucrar el análisis del código css) para determinar qué consulta de medios está activa?

Por ejemplo tengo dos preguntas:

@media screen and (max-width:800px) 

@media screen and (min-width:801px) 

sin necesidad de analizar y mirando a la clientWidth, ¿cómo puedo saber cuál de ellos ha evaluado como true.

Answer 1

MatchMedia de Pablo irlandesa puede hacer el truco: https://github.com/paulirish/matchMedia.js

Ojalá adecuarlos a lo que estamos tratando de hacer?

Answer 2

Para ver cómo las diferentes preguntas de los medios reaccionan el cambio de tamaño o el cambio de orientación, probar la demo en esta página:

http://www.jensbits.com/2011/04/20/media-query-playground-rotate-resize-rinse-repeat/

Puede ajustar los atributos de consulta de medios para tener una idea de cómo afectan a una página .

Answer 3

Hola y espero que esta ayuda, en realidad estoy añadiendo una clase a un selector y estoy trabajando con esta herramienta: https://hacks.mozilla.org/2012/06/using-window-matchmedia-to-do-media-queries-in-javascript/

, de hecho, tienen un claro ejemplo de lo que es activa dentro de la ventana redimensionada aquí http://robnyman.github.io/matchmedia/

en mi caso solo estoy haciendo una tarea específica cuando estoy en un tamaño específico que se puede obtener con la función.

Answer 4

No estoy seguro de cómo lo sepa en qué medio-consulta es activo, pero ...

... ¿no puedes comprobar el ancho de la pantalla con javascript?

if (window.innerWidth >= 801) { 
    // @media screen and (min-width:801px) 
} else { 
    // @media screen and (max-width:800px 
} 

o, ¿qué es lo que falta aquí?

Answer 5

Aunque esta es una vieja pregunta, ocupa un lugar destacado cuando se busca este problema en Google.

Window.matchMedia es oficial y es compatible con all major browsers (IE10 +) y le permitirá consultar si una determinada consulta de medios actualmente coincide.

A partir de la pregunta original:

if (window.matchMedia('screen and (max-width:800px)').matches) { 
    // it matches 
} else { 
    // does not match 
} 

También puede escuchar cuando la consulta resultado del partido cambios adjuntando un detector de eventos a los MediaQueryList que window.matchMedia devuelve:

var mql = window.matchMedia('screen and (max-width:800px)'); 
mql.addEventListener(
    function(mq) { 
     if (mq.matches) { 
      // it matches 
     } else { 
      // does not match 
     } 
    } 
);