• Skip to primary navigation
  • Skip to main content
  • Skip to footer

Chad Ritchie

Graphic Designer, Front-End Web Developer

  • Blog
    • WordPress
  • Projects
    • Graphic Design
    • Web Projects
  • Photos
  • Services
  • Contact

Media queries for every project

August 22, 2013 By Chad Ritchie

Here are the media queries I drop into every project I begin. They pretty much cover every screen size.

// Large Screens
@media only screen and (min-width: 1200px) {}
// Desktop
@media only screen and (min-width: 960px) and (max-width: 1199px) {}
// < Desktop
@media only screen and (max-width: 1199px) {}
// Tablet
@media (min-width: 768px) and (max-width: 959px) {}
// < Full Tablet
@media (max-width: 767px) {}
// Small Tablets, not phones
@media only screen and (min-width: 481px) and (max-width: 767px) {}
// Phones - large
@media only screen and (max-width: 480px) {}
// Phones - small
@media only screen and (max-width: 330px) {}
  • Click to share on Facebook (Opens in new window) Facebook
  • Click to share on X (Opens in new window) X

Filed Under: Blog Tagged With: media queries

Footer

Chad Ritchie Web & Graphic Design