Recommended widths for responsive layouts [closed]

Answer 1

There is no recommended width for responsive layout. It's totally depends upon your layout structure. Layout Structure means use MEDIAQUERIES when you want any specific changes on an specific width or when your layout broke any specific screen width.

Answer 2

If you are looking for best/common practices and particular widths applied when using responsive layouts, I'd suggest you look into grid systems readily available. A quick google search yields a lot of results, but one of my favourite ones would be the 1140 grid from cssgrid.net (site no longer available) - I very much agree with their logic on choosing the measurements. Verbatim:

The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser. Scrap 1024! Design once at 1140 for 1280, and with very little extra work, it will adapt itself to work on just about any monitor, even mobile.

If this is not the kind of answer you were looking for, please rephrase the question.

Answer 3

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.