Recommended widths for responsive layouts [closed]

Question

What do you recommended should be the widths I should use for a responsive layout?

  /* Default Width: */   .container { width: 940px; margin: 0 auto; }    /* Smaller than standard 960 (devices and browsers) */   @media only screen and (max-width: 959px) {}    /* Tablet Portrait size to standard 960 (devices and browsers) */   @media only screen and (min-width: 768px) and (max-width: 959px) {}    /* All Mobile Sizes (devices and browser) */   @media only screen and (max-width: 767px) {}    /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */   @media only screen and (min-width: 480px) and (max-width: 767px) {}    /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */   @media only screen and (max-width: 479px) {} 

Answer 1

I've started using "320 and up"'s widths which are as follows:

Note that they go from small to large not the other way around though. This is more in line with progressive enhancement and definitely preferred anyway: http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/

http://stuffandnonsense.co.uk/projects/320andup/

// Default styling here  // Little larger screen @media only screen and (min-width: 480px) {  }  // Pads and larger phones @media only screen and (min-width: 600px) {  }  // Larger pads @media only screen and (min-width: 768px) {  }  // Horizontal pads and laptops @media only screen and (min-width: 992px) {  }  // Really large screens @media only screen and (min-width: 1382px) {  }  // 2X size (iPhone 4 etc) @media only screen and          (-webkit-min-device-pixel-ratio: 1.5), only screen and          (-o-min-device-pixel-ratio: 3/2), only screen and          (min-device-pixel-ratio: 1.5) {  } 

If you use Sass, here's a little trick I've been using:

$laptop-size: "only screen and (min-width: 768px)"; $desktop-size: "only screen and (min-width: 1382px)"; // etc 

And then

@media #{$laptop-size} {     // Styling here... } 

This way you can easily change widths in one place also you don't have to write the whole thing every time.