Designing and developing a responsive website media queries

Question

I need help when designing and developing a responsive website.

I know it's not code as such and I'm sure i'll get marked down for this but it is a developer question.

I'm only just developing my first responsive theme and I want to make sure I get it right before I go any further.

At the moment I'm designing it at 1000px's wide, this way I thought it would be easier to calculate for smaller screens when designing.

My first question is, what sizes should I design for? if I have the main desktop screen at 1000px, what should a laptop, tablet and mobile be?

Here's the layouts i'm designing to at the moment, is this even correct?

Desktop: 1000px laptop : 800px tablet (Portrait): 768 px phone: 568px

Then you come to media queries, at the moment i'm using the following:

for phones

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) { 
}

for tablets

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

for laptops

@media screen and (max-width: 1024px) {
}

for desktops

@media screen and (min-width: 1025px) {
}

Answer 1

Like many people says nowadays, it's you content who decide for breakpoints. The rule it's easy when your content breaks add a breakpoint.

You can use new developper tools (who give you the list of device width and height) from chrome canary explained here or adaptive mode in firefox. Or you can look here for more device sizes.

One more thing, Brad Frost have a nice tool to test your site ish. And he make a big big list of many patterns and tools here. Hope it gonna help you :)