How many media queries should i use? At what widths? [closed]

Question

Closed. This question is opinion-based. It is not currently accepting answers.

---

Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.

Closed 9 years ago.

Improve this question

I want my design to be efficient.

I unfortunately have 5 different media queries and think that is a bit too much. Is there too much work put in with more media queries?

At what pixel amount should I have the media queries at:

I am assuming there needs to be:

• A typical mobile device (how many px?)
• A tablet(how many px?)
• A net book(how many px?)
• A laptop(how many px?)
• Maybe something bigger(how many px?)

Can anyone tell me at what pixel the media queries should run? I understand I need to use %centages but when i have a giant title in the middle of the screen I need to use a query(or annoying javascript).

Answer 1

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

I recommend this list to get a general idea of what pixels you should use. Depending on how you layout your site you may need to use more or less queries, as you only need a query for each seperate layout/design of the site. A good choice for basic use would be Smartphone, Tablet, Standard Screen, HD Screen or 4.