ES6 CSS3 mediaquery to JavaScript bridge using the content psuedo element
import MQ from 'mediaquery-js';
let mq = new MQ(computationalElement);
// Mediaquery change event
mq.on('mq:change', fn);
// Get the current Mediaquery
mq.breakpoint;You can set computationalElement to any element in the DOM.
If you don't pass an argument, it will fall back to the <html> element.
Next you add some CSS to the element you want to test your mediaquery to. It uses the content attribute to identify the breakpoint.
html:after {
clip: rect(0 0 0 0);
height: 0;
left: -9999px;
overflow: hidden;
position: absolute;
top: -9999px;
visibility: hidden;
width: 0;
}
@media (max-width: 600px) {
html:after {
content: 'sm';
}
}
@media (min-width: 601px) {
html:after {
content: 'lg';
}
}