Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
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?
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 upmin-width: 600px: Targets tablets in portrait mode and upmin-width: 768px: Targets tablets in landscape mode and upmin-width: 1024px: Targets the desktop viewAnd typically I will have my mobile portrait view CSS at the very beginning (hence the term “320 and up”).