What are good resolution values to use with media queries?
css, media-queries
Solution
See this article for a template '320 and Up' - by Andy Clarke, it's used by many developers and designers: http://www.stuffandnonsense.co.uk/blog/about/this_is_the_new_320_and_up
If you scroll down to the media queries section you'll see they use five CSS3 Media Query increments (480, 600, 768, 992 and 1382px). Typically I stick to just 4 (480, 600, 768, 1024).
To explain the ranges:
`min-width: 480px`: Will target mobile devices in landscape mode and up
`min-width: 600px`: Targets tablets in portrait mode and up
`min-width: 768px`: Targets tablets in landscape mode and up
`min-width: 1024px`: Targets the desktop view
And typically I will have my mobile portrait view CSS at the very beginning (hence the term "320 and up").
Problem
Recently I've been playing around with CSS Media Queries because it's a great way to make my website adapt to various screen sizes. I am planning to implement them into the live version. My question is: Are there any recommended resolution values at which the layout changes?