Resize Element on window width change (responsive design)

This Example could used for scaling on mobile Devices. For example, if you would like to change the width of an Image on orientation change. It is very usefull for responsive design.

HTML

<link rel="stylesheet" href="http://scurrilus.de/scurrilus-jsfiddle/scurrilus-copyright.css">
<script src="http://scurrilus.de/scurrilus-jsfiddle/scurrilus-copyright.js"></script>
<!--powered by SCURRILUS-->
<div id="scurrilusCopy"></div>
<script>scurrilusCopy();</script>
<!--ende powered by SCURRILUS-->

<div class="code">
<h1 id="headline">Scale your Browser window!!!</h1>
<div id="resizeContainer">This container get current window width.</div>
<div class="containerWidth"></div>
<img id="resizeImage" src="http://www.hardwareluxx.de/images/stories/newsbilder/aschilling/2012/apple-event-ipad-mini/ipad-mini-3.jpg"/>

<script>
    $(document).ready(function() {
     <!-- Call function first -->
     resizeElement();
     
     <!-- Eventlistener get width of window and call function resizeElement(); -->
        window.addEventListener("resize", function() {
        resizeElement();
        } , true);
    
    });
</script>
</div>

CSS

#resizeContainer {
    display: block;
    padding: 10px;
}

.containerWidth {
    padding: 10px;
}

.code {
    overflow: hidden;
}

JavaScript

function resizeElement() {
    // var width get the width of window
    var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
    
    // write the style width for resizeContainer if window size change.
    document.getElementById('resizeContainer').style.width = width + "px";
    
    // write the style width for resizeImage if window size change.
    document.getElementById('resizeImage').style.width = width + "px";
    
    // Do what you wan't. This example change the background-color in 
    // resizeContainer and change font-size in headline.
    // Feel free to use any javascript action. For example change content.
    
    // if window smaler or bigger then 500px.
    
     if(width < 500) {
    document.getElementById('resizeContainer').style.background = "#ffe920";
    document.getElementById('headline').style.fontSize = "22px";
     } else {
        document.getElementById('resizeContainer').style.background = "#ff6b00";
          document.getElementById('headline').style.fontSize = "24px";
     }
    
    // if window is smaler then 400px.
    
    if(width < 400) {
    document.getElementById('resizeContainer').style.background = "#74aeb7";
    document.getElementById('headline').style.fontSize = "18px";
    }
    
    // if window is smaler then 300px.
    
    if(width < 300) {
    document.getElementById('resizeContainer').style.background = "#be19d1";
    document.getElementById('headline').style.fontSize = "16px";
    $('#headline').text('This is a very small window!')
    } else {
         $('#headline').text('Scale your Browser window!!!')
    }
    
    // helper for example
    $('.containerWidth').html('This is the style for Elements: style="width: ' + width + ';"');
}