Responsive Web Design

CSS3 Media Queries are an extension to CSS Media Types. They are used to assign different CSS stylesheets to a web page depending on browser window size. A Media Query consists of a media type and one or more expressions to limit the scope of style sheets.

On CSS Tricks, A Web Design Community created by Chris Coyier, a web developer and designer who also co-authored Digging into WordPress. Chris covers a number of aspects of media queries including:



The CSS media query syntax for calling an external stylesheet is like this:

The CSS media query attribute can be implemented directly inside a CSS file, like this:
Likewise, you can use more advanced CSS media queries like this to setconditional statements checking for browser window sizes:

	@media (min-width: 544px){
	/* Small "sm" Breakpoint */
	}
	@media (min-width: 768px){
	/* Medium "md" Breakpoint */
	}
	@media (min-width: 992px){
	/* Large "lg" Breakpoint */
	}
	@media (min-width: 1200px){
	/* Extra Large "xl" Breakpoint */
	}
	@media print {
	/* All your print styles go here */
	}

view raw media-queries.css hosted with ❤ by GitHub

So, why is this important? By using the conditional media queries, you can change how your website behaves based on the browser window size. For an example, if the website is being view on a smartphone or Iphone, the Media Query containing CSS for that screen width will be used. The same for older computers and ipads

Resources:
CSS Tricks
Documentation