change css on viewport based sizes

viewport.css

#id{
    background: #999;
    position: fixed;
    top:0;
    width: 100%;
    height: 10em;
    z-index: 99999999999999;
    padding-top:4em;
    -webkit-transition: all linear 1s;
    -moz-transition: all linear 1s;
    -o-transition: all linear 1s;
    -ms-transition: all linear 1s;
    transition: all linear 1s;
}

viewport.html

<header id="id">
    <h1>this is my headline</h1>
    <p>This is just a testing site without content</p>
</header>

viewportcss.js

$(window).resize(viewport);

function viewport(){
    if(window.innerHeight<900)
    {
        $("#id").css("height","6em").css("padding-top","0");
    } 
    else if(window.innerHeight>900)
    {
        $("#id").css("height","10em").css("padding-top","4em");
    }
    return;
}

Or media queries :)

This method works but media queries are easier. However this or media queries still load the content on the page regardless if it was viewable or not. That is the real trick to responsive design.

@susprod yes, this is true. You are right, it is possible with @media-queries but not intended this way. This is the Javascript way and yes, there are use-cases for that.
The problem with the load-size ist another one which has to be solved but it currently is in discussion at W3C/WHATWG list. So soon ther might be a first draft for that problem. :)

@anselmh I hear you. Been looking for a non-loading version of it all. I can't wait for the W3C to figure it out for me.

@susprod many are waiting for this. But still it needs to be implemented in UAs after a spec is released. Fortunately this is a thread by the WHATWG itself :-)