Responsive design with media query

Question

I want to design website with can view on mobile and tablet. I am using responsive with media query.

I detect max-width:320px, max-width:480px.

what screen size should i detect with media query because have a lot of type of device?

That's not actually a question, it just has a question mark on the end. — awiebe
you should answer question and you can help to edit when someone have mistake — chandara sam
Ok, let me put it this way: "There is insufficient information here to effectively answer this question, and you should find a friend or coworker who can communicate the actual problem you are experiencing." — awiebe

David Taiaroa David Taiaroa · Accepted Answer · 2013-07-08T10:50:34

Instead of trying to figure out which screen size to detect, maybe you could approach the problem from a different angle.

One of the main reasons for using responsive desing is so your site will will display well on all devices, so look at your specific design and examine what happens to your design and page layout as you change the window size (both width and height).

Maybe you'll be lucky and have a fluid design that reconfigures well, then it's possible that you won't even need to use @media queries.

It's more likely that at certain viewports or window sizes the design will breakdown though and this is where @media queries come in.

There are no hard and fast rules for which breakbpoints you use for @media queries, as a starting point Foundation uses

/* Very large screens */
@media only screen and (min-width: 1441px) { ... }

/* Medium screens */
@media only screen and (max-width: 1279px) and (min-width: 768px) { ... }

/* Small screens */
@media only screen and (max-width: 767px) { ... }  

/* Landscape Orientation */
@media screen and (orientation: landscape) { ... }

/* Portrait Orientation */
@media screen and (orientation: portrait) { ... }

Maybe you'll want to add a rule for smaller screens, but this is probably as good as any.

Remember that @media queries are there to help when your design breaks and hopefully you won't have to define a lot of rules at every breakpoint.

Good luck!

Responsive design with media query

1 Answers