参考にさせてもらっているフレームワークなどの設定をピックアップ
Twitter Bootstrap v3.0
/* Extra small devices: Phones (<768px) */
@media (max-width: 767px) {}
/* Small devices: Tablets (≥768px) */
@media (min-width: 768px) and (max-width: 991px) {}
/* Medium devices: Desktops (≥992px) */
@media (min-width: 992px) and (max-width: 1199px) {}
/* Large devices: Desktops (≥1200px) */
@media (min-width: 1200px) {}
Twitter Bootstrap v2.3
/* 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) { ... }
jQuery Mobile v1.3
/* Odd iPad positioning issue. */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { ... }
/* Show priority 1 at 320px (20em x 16px) */
@media screen and (min-width: 20em) { ... }
/* Show priority 2 at 480px (30em x 16px) */
@media screen and (min-width: 30em) { ... }
/* Show priority 3 at 640px (40em x 16px) */
@media screen and (min-width: 40em) { ... }
/* Show priority 4 at 800px (50em x 16px) */
@media screen and (min-width: 50em) { ... }
/* Show priority 5 at 960px (60em x 16px) */
@media screen and (min-width: 60em) { ... }
/* Show priority 6 at 1,120px (70em x 16px) */
@media screen and (min-width: 70em) { ... }
WordPress Tewnty Twelve Theme
/* Large desktop */
@media screen and (min-width: 960px) { ... }
/* tablet and desktop */
@media screen and (min-width: 600px) { ... }
WordPress Tewnty Eleven Theme
/* tablet */
@media (max-width: 800px) { ... }
/* smaller devices */
@media (max-width: 650px) { ... }
/* phones */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) { ... }