Breakpoints?

[BibCra]

When building a responsive site which breakpoints should I be targeting to optimise viewing on tablet and mobile devices?

I have looked at a few different boilerplates and read a few articles but there appears no consistency with breakpoints as they change slightly.

Could someone please clarify what the standard breakpoints would be for desktop, table and mobile.

Thanks.

:)

[Paulie_D]

I agree that one should put breakpoints as required by one’s design.

However, the actual answer is:

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

[Paulie_D]

I have to disagree…one should design / code for “high occurance values” like iDevices purely because of the extensive user base.

Not to do so would be foolish.

Putting a breakpoint at, say 1100px and not 1024 (or thereabouts) would mean that your site would look horrible on a iPad.

By all means ADD breakpoints at the levels you want but make sure the “high occurance values” aren’t ignored.

I guess I’m sort of agreeing and disagreeing at the same time. :)

[Paulie_D]

Ah…that’s not what I said…or at least not what I meant

If you’re putting a breakpoint ONLY at 1100 for design purposes and NOT supporting 1024 and below then that’s a fair decision if you decide not to support mobile but the OP was asking about OPTIMISING for tablet and mobile…and the standard breaks to support those…hence my answer.

Like I said, I was agreeing and disagreeing at the same time….it’s just the way I am. :)

[Senff]

TECHNICALLY and THEORETICALLY, breakpoints don’t really have to be pixel-exact.

For example, if you want a difference between iPhone portrait (320px) and iPhone landscape (480px), you can set your breakpoint anywhere in between, since iPhone doesn’t have any mode where it’s anywhere between those two values.

This would work for iPhone landscape mode:

@media only screen and (min-width : 321px) {
/* Styles */
}

But this would have the exact same effect:

@media only screen and (min-width : 479px) {
/* Styles */
}

In both cases, that’s the style you’ll see when the iPhone is in landscape mode (and any resolutions higher than that).

Again, all theoretically and very specific, and should NOT be used like this — just pointing out that it’s not necessarily required to be *exact* about the common break points, and this is just an extremely limited example case to show you can use different values.

I would still use the reference that @Paulie_D mentioned above.

[Paulie_D]

As I said, I’m not suggesting targetting ONLY specific device sizes, I’m just saying you shouldn’t ignore them.

Here’s what I said

> I agree that one should put breakpoints as required by one’s design.

and

> By all means ADD breakpoints at the levels you want but make sure the “high occurance values” aren’t ignored.

However, whilst I’m sure the discussion is useful it’s not the answer the OP was asking for…which I provided.

[joshuanhibbert]

Please, let the content and the context dictate breakpoints. Not the other way around.

[Senff]

+1

[Author]

Posts