With the growing demand of mobile devices we must now take into consideration what the user is viewing a website with, and handle these situations appropriately. CSS in particular has some pretty handy methods to assist with this through media queries. You may have seen “@media” before, but did you know you can add even more goodness to it with a statement like this:


@media only screen and (max-width:500px){
	/* ... */
}

What does this do exactly? This block of CSS will become active ONLY when the screen width is less than or equal to 500 pixels. Ok, so what does this do for me?

Lets say you have a two column layout. For larger screens this is fine, but how about on mobile devices, or when someone has a very small browser window. It would be nice to somehow convert this into a one column design. You’re now thinking, “Yeah, I’ve done that before with a mobile stylesheet with “@media handheld”. I’m going to take it one step further.

Lets say when the screen is smaller than 500px we slide the navigation out of the way, leaving only a handle. Then on hover of focus we’ll let it re-appear. We’ll also sprinkle in some CSS3 transitions to make it pretty. Lets start with some html.


<!DOCTYPE html> 
<html> 
	<head> 
		<title>Test CSS Media Query</title> 
		<link rel="stylesheet" href="screen.css" />
	</head> 
	<body> 

		<div id="wrapper">
			
			<div id="nav">
				<ul>
					<li><a href="#" title="Link">Link to Home</a></li>
					<li><a href="#" title="Link">Link to There</a></li>
					<li><a href="#" title="Link">Link to Here</a></li>
					<li><a href="#" title="Link">Link to This</a></li>
				</ul>
			</div>
			
			<div id="content">
				<h1>This is the Title</h1>

				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
				<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>			
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
				<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
				<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>			
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
				<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
				<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>			
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
				<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</div>
				
		</div>

	</body>
</html>

Now we pour on the CSS. Before you dive in and get confused with the @media part, lets start above that. We have a standard 2 column layout with #nav and #content. #nav simply floats left, and #content gives it room with margin-left.

Then the fun part with the media query with the viewport width condition. We slide the #nav out of the way and reduce the #content margin. (this gives the one column, but leaves a little handle for the #nav) When the #nav handle is hovered we adjust the margin and overlay the #content. And for added fun I threw in some transition effects, but don’t get caught up on those as they are just eye candy.


@charset "UTF-8";

/*
*	Mass Reset
*/
*{ margin: 0; padding: 0; border: 0; }
body{ background-color: #f4fff4; font: normal 1em/1.5em Arial, Serif; }

/*
*	Normal layout
*/
#wrapper{  }
#wrapper #nav{ width: 160px; float: left; background-color: #eeeeee; border-right: solid 20px #aaa; height: 100%; position: fixed; z-index: 1000; }
#wrapper #content{ margin-left: 180px; padding: 10px 20px; position: relative; z-index: 100; }

#wrapper #nav ul{ list-style: none; }
#wrapper #nav ul li a{ display: block; padding: 8px 5px 8px 10px; border-bottom: solid 1px #aaa; color: #548f54; text-decoration: none; }
#wrapper #content h1, 
#wrapper #content p{ margin: 5px 0; }

/*
*	When screen is smaller than 500px
*/
@media only screen and (max-width:500px){
	#wrapper #nav{ margin: 0 0 0 -160px; }
	#wrapper #content{ margin-left: 20px; }

	#wrapper #nav:hover, 
	#wrapper #nav:focus{ 
		margin: 0 -160px 0 0;

		-moz-transition-property: margin;
		-moz-transition-duration: 1s;
		-moz-transition-timing-function: ease-out;
		-webkit-transition-property: margin;
		-webkit-transition-duration: 1s;
		-o-transition-property: margin;
		-o-transition-duration: 1s;
	}
}

Now, when our browser shrinks our navigation will hide. On hover or focus the left nav will elegantly slide out (currently in webkit, other browsers will have transition effects eventually, but should still work for now).

This is not a complete, nor robust example. It simply shows how they work, and how you could be creative and show/hide your navigation. Here is a pretty detailed reference for different media queries for iPhone, iPad, etc.

I have also provided the example here: Media Query Example

Related posts:

  1. Advanced Media Queries for Mobile Devices
  2. Print Preview with CSS and Javascript
  3. 8 Steps to Great CSS
  4. Variable Columns with CSS
  5. CSS Bubble Tooltips