Media Query Resize Helper

HTML

<h1>Media Query Helper</h1>
<p>Resize the browser fool!</p>

CSS

body{
    padding:40px 0 0;
}
h1{
    font-size:3em;
    font-weight:bold;
}
p{
    margin:20px;
}
#resize{
    position:fixed;
    top:0;
    left:10px;
    background:#fff;
    border-left:1px solid #000;
    border-right:1px solid #000;
    border-bottom:1px solid #000;
    padding:5px 10px;
}

JavaScript

$(document).ready(function(){
    
    $('body').prepend(
        $('<div>')
            .attr('id','resize')
            .append('Resize to start')
    );    
    $(window).resize(function() {
        var viewportWidth = $(window).width();
        var viewportHeight = $(window).height();
        $('#resize').html('<span style="color:#000;">'+viewportWidth+'px</span>');
    });
});