La Lógica de las Mediaqueries

If

Las Mediaqueries son proposiciones lógicas, 'Si' la condicion dada se cumple en el browser, se ejecuta esa porcion de códigoo css.

And

@media (min-width: 600px) and (max-width: 800px) {
  html { background: red; }
}

Or

@media (max-width: 600px), (min-width: 800px) {
  html { background: red; }
}

Not

@media not all and (max-width: 600px) {
  html { background: red; }
}

Exclusivas

@media (max-width: 400px) {
  html { background: red; }
}
@media (min-width: 401px) and (max-width: 800px) {
  html { background: green; }
}
@media (min-width: 801px) {
  html { background: blue; }
}

Sobreescribir

@media (min-width: 400px) {
  html { background: red; }
}
@media (min-width: 600px) {
  html { background: green; }
}
@media (min-width: 800px) {
  html { background: blue; }
}

Mobile First

html { background: red; }

@media (min-width: 600px) {
  html { background: green; }
}

Desktop Firts

html { background: red; }

@media (max-width: 600px) {
  html { background: green; }
}

Proposiciones Complejas

@media 
  only screen and (min-width: 100px),
  not all and (min-width: 100px),
  not print and (min-height: 100px),
  (color),
  (min-height: 100px) and (max-height: 1000px),
  handheld and (orientation: landscape)
{
  html { background: red; }
}

Fuente: http://css-tricks.com/logic-in-media-queries/