How much media queries?

Question

How much media queries would you suggest to use?

I've made 4 designs:

960 for landscape-mode (ipad and more like Desktop) 768 for portrait-mode (ipad) 340 for portrait-mode (iphone) and all above 960

Now my questions:

1) First I even don't know why I used 960 and not 1024. I read something a while ago, because of the scrollbar you've to reduce the width to 960. What about this regarding Tablets and Smartphones?

2) I've choosed these widths because I thought, if someone uses landscape mode, it would switch to the "ipad-media-query" and back to the "iphone-media-query". But that's just my theory. I'm new at media queries. That's why I ask. Appreciate any help or even your suggested CSS-code-examples to have the best amount of media queries covered for a website!?

3) I just want to cover most tablets, smartphones, desktops, etc. to be affected by the best media-query size. I would really appreciate your "best solutions"!

Answer 1

How long is a piece of string?

It's really up to you and your design as to how many media queries would be suitable to use and how you implement them.

As a guide I'd recommend looking at how Twitter Bootstrap implement their media queries. They've done a lot of research into it to arrive at their numbers so that would be a good starting point.

http://twitter.github.com/bootstrap/scaffolding.html#responsive

Answer 2

It is a bad idea to try to indentify breakpoints. The main reason for a breakpoint in an responsive website is to keep the experience optimal. You don't want to bring in a new media query for every new device or resolution.