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.

In this video quick tip, we’ll learn how laughably simple it is to do this with a touch of jQuery, and the resize() method.

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;
}

• Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.