17

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?

4 Answers 4

27

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

2
  • 2
    Start with mobile first, then expand your viewport until the design breaks or looks bad, add a breakpoint... repeat. Jul 9, 2012 at 3:23
  • Less is more: I do it the other way, start with a responsive percentage based desktop view and add exceptions to mobile and tablet - usually meaning just tweaking the grid, like styling all columns to full width Sep 19, 2016 at 19:47
5

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

4

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

2

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.