Geek asks and answers

How many media queries?

How many media queries do you suggest using?

I have done 4 projects:

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

Now my questions are:

1) At first, I don’t even know why I used 960, not 1024. I read something a while ago, due to the scroll bar, you have to reduce the width to 960. What about this regarding tablets and smartphones?

2) I chose these widths because I thought that if someone uses landscape mode, he will switch to "ipad-media-query" and return to "iphone-media-query". But this is just my theory. I am new to media queries. That is why I ask. Appreciate any help, or even your suggested CSS code examples, to get the most media queries for your website !?

3) I just want to cover most tablets, smartphones, desktops, etc., in order to influence the best size of media requests. I would really appreciate your "best solutions"!

+5
source share
6 answers

How long does the string last?

It really depends on you and your design regarding how many media queries are suitable for use and how you implement them.

, Twitter Bootstrap -. , , .

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

+6

. - - . - .

+2

, .. , CSS. . - , .

- , . , - , . , .

9 -.

-, .

+2

- : 240 x 320 (), 320 x 480 (), 480 x 640 ( ), 768 x 1024 ( - ), 1024 x 768 ( - )

320 , , , .

+1

I would use a dynamic layout that does not require media queries.

just use media queries to hide / move items.

You can use any number of them. just put javascript on your page that displays your current browser width and then resize your browser to check when to hide the elements. works for me

0
source

The last world of design needs flexible design.

See examples and use all requested media queries: http://nmsdvid.com/snippets/

0
source

More articles:


All Articles