Media Query Boot Camp

Let's learn us some media queries.

by Travis

HTML

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css">
<div id="container">
    <div id="header">
        <h1>Media Queries Boot Camp</h1>
    </div>
    <div id="navigation">
        <div id="navControl">
            <span id="navControlText">Display Navigation</span>
            <span id="navControlStatus">+</span>   
        </div>
        <ul id="navLinks">
            <li><a href="#">Link One</a></li>
            <li><a href="#">Link Two</a></li>
            <li><a href="#">Link Three</a></li>
            <li><a href="#">Link Four</a></li>
            <li><a href="#">Link Five</a></li>
            <li><a href="#">Link Six</a></li>
        </ul>    
    </div>
    <div id="content">
        <div id="headline">
            <h1>This is a headline.</h1>
            <p>Lebowski ipsum dolor sit amet, consectetur adipiscing elit praesent. A dick, man! And let me tell you something: I dig your work. Playing one side against the other —in bed with everybody— fabulous stuff, man. Ac magna justo pellentesque ac lectus quis. I don't know about you, but I take comfort in that.</p>  
        </div>
        <div id="left" class="col">
            <h2>Left Column</h2>
            <div class="photo"><img src="http://i.imgur.com/kFXNn.jpg" /></div>
            <p>Lebowski ipsum dolor sit amet, consectetur adipiscing elit praesent. A dick, man! And let me tell you something: I dig your work. Playing one side against the other —in bed with everybody— fabulous stuff, man. Ac magna justo pellentesque ac lectus quis. I don't know about you, but I take comfort in that. It's good knowin' he's out there, the Dude, takin' her easy for all us sinners. Shit. I sure hope he makes The finals. Welp, that about does her, wraps her all up. Things seem to've worked out pretty good for the Dude'n Walter, and it was a purt good story, dontcha think? Made me laugh to beat the band. Parts, anyway. Course—I didn't like seein' Donny go. But then, happen to know that...

CSS

body {font: lighter 100% "Segoe UI", sans-serif; background:#eee;}
h1 {font-size:2em;}
h2 {font-size:1.5em;}
p {line-height:1.5;}
#container {width:93.75%; margin:0 auto; padding:3%; background:#eee;}
#header {padding:3%;}
#navigation {padding:1.5%; background:#F9A509; border-radius:5px 5px 0px 0px; overflow:hidden;}
#navigation ul {list-style-type:none;}
#navigation ul li {}
#navigation ul li a {font-size:0.8em; color:#333333; text-decoration:none; margin:0 1% 0 0; padding:1.5%; background:white; border-bottom:1px solid #C97B00; border-right:1px solid #C97B00; border-radius:3px; display:block; float:left;}
#navControl {display:none;}
#content {padding:3%; background:white; overflow:hidden;}
#headline {padding:2%;}
#headline h1 {font-size:3em;}
#left {width:55%; padding:2%;}
#right {width:35%; padding:2%;}
.col {float:left;}
.photo {width:40%; padding:2%; border:1px solid #eee; float:right;}
.photo img {max-width:100%; display:block;}

#footer {color:#fff; text-shadow:1px 1px 0px #666; padding:3%; background:#F9A509; border-radius:0px 0px 5px 5px; overflow:hidden;}

@media screen and (max-width:480px) {
    h1 {font-size:1.5em;}
    h2 {font-size:1.2em;}
    p {font-size:0.8em;}
    #navigation ul {width:94.8%; margin:2%; display:none; overflow:hidden;}
    #navigation ul li a {width:40.9%; margin:0 2%; padding:3%; color:#fff; font-size:0.8em; text-shadow:1px 1px 0px #666; background:none; border:none; border-bottom:1px solid #fff; border-radius:0px; float:left;}
    #navControl {width:92.8%; color:#333333; text-decoration:none; margin:2%; padding:2%; background:white; border-bottom:1px solid #C97B00; border-right:1px solid #C97B00; border-radius:3px; display:block; float:left;}
    #navControl:hover {cursor:pointer;}
    #navControlText {float:left;}
    #navControlStatus {float:right;}
    #headline h1 {font-size:1.7em;}
    #left {width:90%;}
    #right {width:90%;}
    .col {float:none;}
}

JavaScript

$(function(){
    $('#navControl').toggle(function(){
        $('#navControlText').text('Hide Navigation');
        $('#navControlStatus').text('-');
        $('#navLinks').show();        
    }, function (){
        $('#navControlText').text('Show Navigation');
        $('#navControlStatus').text('+');
        $('#navLinks').hide();      
    });
});