Playing With Responsive CSS3

Using media queries to test responsive layouts.

by Colin Soderstrom

HTML

<div id="topBar">
    <div class="sizes">Browser Size:<br>
        <div id="size"></div>
    </div>
    <div class="sizes">
        Screen Size:
        <div id="size2"></div>
    </div>
</div>
    <div class="responsiveBlock"><p>1</p></div>
<div class="responsiveBlock"><p>2</p></div>
<div class="responsiveBlock"><p>3</p></div>
<div class="responsiveBlock"><p>4</p></div>
<div class="responsiveBlock"><p>5</p></div>
<div class="responsiveBlock"><p>6</p></div>

CSS

#topBar {
    height: 80px;
    width: 100%;
    margin-bottom: 5px;
    text-align: center;
}
.sizes {
    float: left;
    margin: 5px;
    font-family: arial;
    padding: 5px;
    border: 1px solid black;
}
.responsiveBlock {
    background-color: #FF0000;
    margin: 5px;
    float: left;
    width:200px;
    height: 82px;
    text-align: center;
    font-family: arial;
    font-size: 1.5em;
    color: white;
}
@media screen and (max-width: 480px) {
    .responsiveBlock {
        width:150px;
        height: 82px;
        background-color: #CC0000;
        float: left;
    }
}

JavaScript

$(window).on('resize', showSize);

showSize();

function showSize() {
    $('#size').html('Height: '+$(window).height()+'<br>Width: '+$(window).width());
    $('#size2').html('Height: '+screen.height+'<br>Width: '+screen.width);
}