Media Queries is a great new addition to CSS. It is used to change you site depending on certain circumstances. One great way of using it is to change the layout of your site depending on the screen sizes. Check out mediaqueri.es for some insperation.

Most people automatically think of the great possibilities for mobile devices, but it is also a great feature for someone with a big monitor. Just think of all the space that normally goes to waste!

So how does it work? Well really easily actually. Lets image for the sake of simplicity that you want different  h1 styles for different screen sizes. All you have do is specify the screen size and then inside the media query tag just put you normal css code.

Oh, before I get to the media query code: another useful bit of code for getting rid of the zooming on mobile devices you are optimizing for is this.

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

Just paste it in the header section. I have not experienced any difficulties with it on a normal PC/Laptop.
So on to the media query:

@media screen and (max-width: 1024px){
	#your-div-id h1{color:#CCC}
        #your-div-id h2{color:#CC0}
 }
 
@media screen and (max-width: 800px){
	#your-div-id h1{color:#C00}
        #your-div-id h2{color:#C33}
 }

For your convenience I have prepared a few media queries for common screen sizes to copy and paste

@media screen and (max-width: 1920px){}
@media screen and (max-width: 1680px){}
@media screen and (max-width: 1600px){}
@media screen and (max-width: 1440px){}
@media screen and (max-width: 1366px){}
@media screen and (max-width: 1280px){}
@media screen and (max-width: 1152px){}
@media screen and (max-width: 1024px){}
@media screen and (max-width: 800px){}
@media screen and (max-width: 640px){}
@media screen and (max-width: 480px){}
@media screen and (max-width: 400px){}
@media screen and (max-width: 320px){}