Let's dig in into JavaScript and matchMedia usages. For those who doesn't know what matchMedia is, let me explain. You probably know what Media Queries in CSS are. You can match the max-width for instance to check if You are on mobile device etc. But sometimes CSS is not enough and You have to execute additional code in JavaScript when particular break point in Media Query has been reached. Here matchMedia comes with help:D

Before matchMedia

Before I knew about matchMedia I used onResize event a lot. Every time I checked the width of the screen and for instance if it was lower than 400 pixels I executed the code. But there were two main problems. Getting width of the viewport was usually problematic when I used different browsers. Second problem was that viewport width wasn't always coincide with particular Media Query. For instance when I tried to check if I have 480 pixels media query was executed and CSS rules was changed, but JS code wasn't executed. It drives me mad...

After that I learned how to use matchMedia and it solves my problems (almost)

How to use matchMedia

Usage is really simple. Let's assume that we wan't to check this in JavaScript:

@media all and (max-width: 480px){
 /* Some CSS here... */
}

We will try to target all media that viewport is less or equal to 480 pixels. OK, now the fun part in JS:

var mql = window.matchMedia('all and (max-width: 480px)');
if (mql.matches) {
    //Yes, media query matches, we are 480px or less
} else {
    //No match here, sorry...
}

We create matchMedia by window.matchMedia('here should be your rule');  Basically it's copy+paste from CSS @media rule.

Now we check if it match the CSS by mql.matches If it match we are executing the code or not. And basically... that's it! Now You know how to use matchMedia, really simple, isn't it?

matchMedia and resize event using addListener

OK, but how can we handle dynamic screen resizing? How to wait for changes? For instance I want to execute some action every time screen will reach 480px. For instance let's load mobile ads when we are under 480 pixels and load normal ads when we are above 480px. I will use previous code with some extra stuff:

var handleMatchMedia = function (mediaQuery) {
        if (mediaQuery.matches) {
            //load mobile ads
        } else {
            //load desktop ads
        }
    },
    mql = window.matchMedia('all and (max-width: 480px)');

handleMatchMedia(mql); //Execute on load
mql.addListener(handleMatchMedia); //Execute each time media query will be reached

First of all we have to create function that will handle the matchMedia (handleMatchMedia). After we define it we have to execute the function for the first time. We need to check on page load if we are already in 480px media query or not. Line below we have to add listener to matchMedia. In parameter we have to pass the function that will be executed when viewport will be in media rule.

You have to know that this code won't be executed on every screen resize. Function will be executed ONLY when viewport size will be 480px.

Browser support, polyfills

Generally what is really big plus it that it's widely supported: http://caniuse.com/matchmedia

Problem is on Internet Explorer of course is on IE9 and below. But there is really simple solution for that - polyfills. Here is one of the most popular I think:

https://github.com/paulirish/matchMedia.js/

I remember having problems on IE7 and IE8 with this, but there is nice extension for this polyfill here:

https://github.com/benschwarz/matchMedia.js/tree/IE7-8