Display Resize Values

by amindunited

HTML

<div class="screen">
    
</div>

<div class="screen_size">
    !!!!!
</div>

CSS

.screen_size {
    background-color: rgba(127, 127, 127, .5);
    position: absolute;
    top:0px;
    left: 0px;
    height: 20px;
    min-width: 80px;
    border: solid 1px pink;
    text-align: center;
    font-weight: bold;
    color: white;
}
.screen {
    background-color: #345678;
    width: 100%;
    height: 100%;
    position: absolute;
}
@media only screen and (min-width: 0px) and (max-width: 479px) {
    .screen {
        background-color: red;
    }
}

JavaScript

$( window ).resize(function(e) {
    var w = $(window).width();
    var h = $(window).height();
    $('.screen_size').text(w+' x '+ h);
})