Media query test with scrollbar

This fiddle tests the shen the media quieries react according to window size.

by web tiki

HTML

<div id="wind">window width : <span>resize the window width!</span></div>

CSS

#wind{
    height:5000px;
}

@media screen and (max-width: 800px) {
    body {background: lightgrey ;}
}

@media screen and (max-width: 700px) {
    body {background: aqua ;}
}

@media screen and (max-width: 600px) {
    body {background: grey ;}
}

JavaScript

$(window).on('resize', function(){
    var wind     = $( window ).width();
    $('#wind span').html(wind + "px");
   
});