What are good resolution values to use with media queries? - css

Question

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?

Answer 1

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").

Answer 2

I would just like to add to Suvi's answer.
Adaptive Design applies media queries to targeted resolutions however with Responsive Design you are free to add the breakpoints wherever you feel is necessary.
There is no rule as to how many breakpoints a page should have, but one should be added wherever the layout breaks. The aim is to make sure the design and content flows nicely regardless of the width of the viewport.
I think this post provides a good overview:
http://www.williamwalker.me/blog/an-introduction-to-responsive-design.html

Answer 3

Try this one with retina display
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Hope you are fine

Answer 4

I wrote this less solution:
/* screens range */
#screen-s-max: 20em; /* 320px */
#screen-min: 20.063em; /* 321px */
#screen-max: 40em; /* 640px */
#screen-m-min: 40.063em; /* 641px */
#screen-m-max: 64em; /* 1024px */
#screen-l-min: 64.063em; /* 1025px */
#screen-l-max: 90em; /* 1440px */
#screen-xl-min: 90.063em; /* 1441px */
#screen-xl-max: 120em; /* 1920px */
#screen-xxl-min: 120.063em; /* 1921px */
/*
0----- smallmobile -----320----- mobile -----640----- tablet -----1024----- notebook -----1440----- desktop -----1920----- wide
*/
#onlyScreen: ~"only screen";
#smallmobile: ~"(max-width: #{screen-s-max})";
#mobile: ~"(min-width: #{screen-s-max}) and (max-width: #{screen-max})";
#tablet: ~"(min-width: #{screen-m-min}) and (max-width: #{screen-m-max})";
#notebook: ~"(min-width: #{screen-l-min}) and (max-width: #{screen-l-max})";
#desktop: ~"(min-width: #{screen-xl-min}) and (max-width: #{screen-xl-max})";
#wide: ~"(min-width: #{screen-xxl-min})";
#portrait: ~"(orientation:portrait)";
#landscape: ~"(orientation:landscape)";
#highdensity: ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)",
~"only screen and (min--moz-device-pixel-ratio: 1.5)",
~"only screen and (-o-min-device-pixel-ratio: 3/2)",
~"only screen and (min-device-pixel-ratio: 1.5)";
#mobile-and-more: ~"(min-width: #{screen-min})";
#tablet-and-more: ~"(min-width: #{screen-m-min})";
#notebook-and-more: ~"(min-width: #{screen-l-min})";
#desktop-and-more: ~"(min-width: #{screen-xl-min})";
/*
syntax example
#media #onlyScreen and #tablet and #portrait , #notebook and #landscape, #mobile and #landscape{
body{
opacity: 0.8;
}
}
*/
As shown in syntax example you can combine all these less variables and obtain complex media query. Use "and" for AND logic operator and comma for OR. You can combine different screen resolutions, device orientation (landscape/portrait) and retina or not devices.
This code is also easy configurable cause you can edit/add/remove screens range values to manage different screen resolutions.