Recommended widths for responsive layouts

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) {}

What is your question? In your listing are some good values in my opinion. — rekire, Apr 05 '12 at 10:22
possible duplicate of [Good widths for media queries on responsive site](http://stackoverflow.com/questions/8564752/good-widths-for-media-queries-on-responsive-site) — George Stocker, Jun 14 '12 at 11:33
@GeorgeStocker, did you flag it as such? I did so yesterday, but I think it takes several duplicate flags by the community to get reviewed by SO moderators. — hotshot309, Jun 14 '12 at 13:27

score 46 · Answer 1 · edited Jan 05 '23 at 14:58

46

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:

// 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.

edited Jan 05 '23 at 14:58

Mushroomator

6,516
1
10
27

answered Apr 05 '12 at 10:47

powerbuoy

12,460
7
48
78

Can you please help me understand why did you use min-width instead of the traditional max-width that I often see? – Jürgen Paul Apr 05 '12 at 10:54
2

I think Brad Frost explains it better: http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/. In short, starting from the lowest common denominator ensures that it works everywhere. Just like how you first build a fully functional HTML form and _then_ "hijax" it for browsers that understand it. This is called progressive enhancement. Going the other way is graceful degradation and really has zero benefits over PE. – powerbuoy Apr 05 '12 at 10:55
1

Very good answer, although a little information as to why those widths were chosen by 320-and-up would be nice. – martin Nov 08 '13 at 04:31
@powerbuoy is your answer still true in 2018? ps. the `http://stuffandnonsense.co.uk/projects/320andup/` is broken – Adam Apr 09 '18 at 21:42
@Flo personally I just break when it's needed. To keep things consistent I normally store my numbers in SASS variables but I rarely care about specific devices tbh. Can't wait for element queries or whatever they'll be called. – powerbuoy Apr 10 '18 at 17:00
@powerbuoy thank you. Do you have a code sample available online perhaps? I'm starting out with CSS grids and am looking for code that has worked well in production. – Adam Apr 10 '18 at 17:05
There are so many examples of this, one of which in my own reply with SASS vars (I still use that approach) I recommend reading Frost's article as well. It's still as relevant today. – powerbuoy Apr 10 '18 at 17:13

score 26 · Accepted Answer · answered Apr 05 '12 at 10:22

26

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.

answered Apr 05 '12 at 10:22

sandeep

91,313
23
137
155

score 4 · Answer 3 · edited Apr 09 '18 at 21:20

4

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.

edited Apr 09 '18 at 21:20

Adam

6,041
36
120
208

answered Apr 05 '12 at 10:36

Oleg

24,465
8
61
91

The problem is I want it to be responsive, but I don't want it to be fluid. That's why I thought of settings individual widths for each screen size. – Jürgen Paul Apr 05 '12 at 10:42
3

I think for anything smaller than ~900px it's better to be fluid. There are so many different hand held devices out there that you'll end up with hundreds of different media queries otherwise. – powerbuoy Apr 05 '12 at 10:54

Recommended widths for responsive layouts

3 Answers3

Linked