In JavaScript, it is possible to fire a specific process at a screen breakpoint (usually a point to switch between different displays for different devices in a responsive design).
// Processes firing at breakpoints
var mql = window.matchMedia('screen and (min-width: 769px)');
function checkBreakPoint(mql) {
// SP
if (!mql.matches) {
}
// PC
else {
}
}
// Fires at the moment of breakpoint
mql.addListener(checkBreakPoint);
// First execution
checkBreakPoint(mql);
This code first creates a media query using window.matchMedia. When this media query matches (i.e., when the screen width is greater than 769px), the checkBreakPoint function fires.
Then, using mql.addListener, the checkBreakPoint function is called each time the breakpoint changes. And finally, checkBreakPoint is called once for the first execution.