Different Layouts for Different Widths

It’s becoming more and more common for web sites and applications to provide different layouts dependent upon the user’s window size, or resolution. This can be accomplished in a variety of ways, ranging from CSS to JavaScript solutions.

<div id="container">
   <div id="nav">

   </div>
</div>

By utilizing jQuery’s 「resize()」 method, we can easily listen for when the user changes the width of their browser window.

function checkWindowSize() {

	if ( $(window).width() > 1800 ) {
		$('body').addClass('large');
	}
	else {
		$('body').removeClass('large');
	}
}

$(window).resize(checkWindowSize);

Then, subsequently, we target our desired CSS properties accordingly.

#container {
	width: 800px;
	height: 1000px;
	background: #e3e3e3;
	margin: auto;
}

/* Change container size for larger windows. */
.large #container {
	width: 1000px;
}

#nav {
	width: 100%;
	height: 100px;
	border-bottom: 1px solid white;
	background: #999999;
}

.large #nav {
	float: left;
	width: 200px;
	border-bottom: none;
	border-right: 1px solid white;
	height: 1000px;
}