UPDATE

En Twitter Bootstrap utilizan las reglas de la siguiente manera:

/* Large desktop */
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }

En Stuff&Nonsense, Andy Clarke nos comparte un snippet de código CSS y HTML para utilizar las Media Queries de CSS3 para toda ocasión. Las Media Queries son útiles para poder manipular nuestro contenido de acuerdo al tamaño del layout en el que se despliega la página web.

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { }

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) { }

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) { }

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { }

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { }

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { }

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) { }

/* Large screens ----------- */
@media only screen and (min-width : 1824px) { }

/* iPhone 4 and high pixel ratio devices ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) { }

También podemos utilizarlo de esta manera en HTML

<link rel="stylesheet" href="smartphone.css" media="only screen and (min-device-width : 320px) and (max-device-width : 480px)"/>
<link rel="stylesheet" href="smartphone-landscape.css" media="only screen and (min-width : 321px)"/>
<link rel="stylesheet" href="smartphone-portrait.css" media="only screen and (max-width : 320px)"/>
<link rel="stylesheet" href="ipad.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)"/>
<link rel="stylesheet" href="ipad-landscape.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)"/>
<link rel="stylesheet" href="ipad-portrait.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)"/>
<link rel="stylesheet" href="widescreen.css" media="only screen and (min-width : 1824px)"/>
<link rel="stylesheet" href="iphone4.css" media="only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5)"/>