Tue, 2015-06-23 00:10

When first getting into responsive design you'll often hear of a term coined "media queries". What this does is lock off certain sizes on the site based on the maximum potential of the width and height of the device that is currently viewing it. This is a much more intermediate way of developing sites but this "quick-look", if you will, can help you jump start into your first responsive project with ease. Now let's get started.

Here are the most basic sizes typically used by modern devices around the world that I use myself:

Desktop Layout Sizes (Can range from 960-1140 depending on your layout.)
@media only screen and (min-width:1025px) {}

Tablet (Landscape)
@media only screen and (min-width:769px) and (max-width:1024px) {}

Tablet (Portrait)
@media only screen and (min-width:581px) and (max-width:768px) {}

Phone (Landscape)
@media only screen and (min-width:321px) and (max-width:580px) {}

Typical Phone (Portrait)
@media only screen and (max-width:320px) {}

So let's say I needed to change the size of a button the landscape version of the layout for tablets, I would simply grab the code above and insert the following:

@media only screen and (min-width:769px) and (max-width:1024px) {
a.button {
float:left;
margin:0 auto;
color:#FFF;
background-color:black;
border-radius:3px;
width:50%; /** Changed from 100% to 50% for Landscape viewing on Tablets. */
}
}

As you can see the @media is a declaration in itself so the curly brackets are required to direct the following commands you write to be aimed specifically between those device sizes. So instead of the button being 100% like it is on the desktop version it is now at 50%.

There are many other ways to effect your layouts, such as the Desktop Sizes being a min-width only and the Phone Portrait size being a max-width only you can figure out how exactly things need to be positioned within those ranges of sizes.

I hope this little cheat-sheet helps you when developing responsive sites as I start with this and may evolve into more in-depth sizes depending on devices that our Clients use and devices that my team may use as well.

Written by
Anthony Marrero
Front-End Expert

A Florida native, Anthony is always living in the bleeding edge of modern design patterns and practices. He has built countless responsive and mobile websites using the latest technologies, and is our go to person for ensuring the finished product is pixel perfect on all devices. Outside of code he is an accomplished lyricist and musician.