Reputation: 117

How much media queries?

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"!

Upvotes: 5

Answers (6)

Colby Whitted

Reputation: 69

Use as many media Queries as you need to. You may shy away from using too many because you don't want a gigantic CSS file. But that wont significantly slow down the site. If you organize your media Queries well and use min and max widths for each query it will be very easy to keep track of your code.

You can use one media Query for every orientation of every device if you want. Of course ideally you want to use zero media queries and just make a perfect site that morphs perfectly. But that's not going to happen unless your site is super simple.

I use 9 media queries.

If you can widen the resolution parameters and get rid of a few media queries, all the better.

Upvotes: 2

Steffe

Reputation: 348

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.

Upvotes: 2

Touhid Rahman

Reputation: 2583

Use media queries for: 240 x 320 (mobile), 320 x 480 (mobile), 480 x 640 (small tablet), 768 x 1024 (tablet - portrait), 1024 x 768 (tablet - landscape)

Considering width below 320px is a very good practice but for those who focus a lot about each and every visitor.

Upvotes: 1

Sandeep Pattanaik

Reputation: 632

The latest design world wants responsive design.

See this examples & use all media queries you want: http://nmsdvid.com/snippets/

Upvotes: 0

Billy Moat

Reputation: 21050

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

Upvotes: 6

Jochen Ullrich

Reputation: 578

i would use a dynamic layout which does not need media queries.

just use the media queries to hide/move elements.

you can use any number of them. just put some javascript in your page which displays your current browser width and then resize your browser to test when to hide elements. works for me

Upvotes: 0

How much media queries?

Answers (6)

Related Questions