Benny Sutton is 4 hire - just click here

Using JavaScript matchMedia

Emulate CSS media queries using JavaScript matchMedia

This demonstrates how you can emulate CSS media queries using javascript matchMedia.

see what happens when you resize your browser window to less than 600px

             
    var para = document.querySelector('.test');
    var mql = window.matchMedia('(max-width: 600px)');

    function screenTest(e) {
        if (e.matches) {
            /* the viewport is 600 pixels wide or less */
            para.textContent = 'This is a narrow screen — less than 600px wide.';
            document.body.style.backgroundColor = 'red';
        } else {
            /* the viewport is more than than 600 pixels wide */
            para.textContent = 'This is a wide screen — more than 600px wide.';
            document.body.style.backgroundColor = 'blue';
        }
    }

    mql.addEventListener('change', screenTest);