Media query test with scrollbar

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

by Vallek

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 ;}
}
*/

html{container-type:inline-size;}
@container(max-width:800px){
  body{background:lightgray;}
}
@container(max-width:700px){
  body{background:aqua;}
}
@container(max-width:600px){
  body{background:gray;}
}

JavaScript

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