Opinions: Breakpoints for layout containters

[B_Stockwell]

Not a technical question, but I'm wondering if folks can offer what they're using for breakpoints their layout containers. 

FWIW, here's my definition from my structure file in my base template-type, but I'm not tied to this at all.

<cq:responsive jcr:primaryType="nt:unstructured"> <breakpoints jcr:primaryType="nt:unstructured"> <phone jcr:primaryType="nt:unstructured" title="Small - 640" width="{Long}640"/> <phablet jcr:primaryType="nt:unstructured" title="Medium - 992" width="{Long}992"/> <tablet jcr:primaryType="nt:unstructured" title="Dektop - 1300" width="{Long}1300"/> </breakpoints> </cq:responsive>

The provided htmlp5page example uses 650 and 1200 -- that's probably sufficient to be honest. But I'm wondering if anybody was doing anything different.

[Lokesh_Shivalingaiah]

Hi,

Breakpoints completely depends on how many resolutions, devices you would like to support. It would completely be a UI/UX designer call with the marketing folks !

I also dont see any problems with your defined structure aswell

[kautuk_sahni · Accepted solution]

Hi 

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

Link:- http://stackoverflow.com/questions/18424798/twitter-bootstrap-3-how-to-use-media-queries

//Twitter Bootstrap 3: how to use media queries?

Here are the selectors used in BS3, if you want to stay consistent:

@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}
Here are the selectors used in BS4. There is no "lowest" setting in BS4 because "extra small" is the default. I.e. you would first code the XS size and then have these media overrides afterwards.

@media(min-width:34em){}
@media(min-width:48em){}
@media(min-width:62em){}
@media(min-width:75em){}
Update 2015-12-08: This is still accurate as of version 3.3.6 and 4.0.0a2

Link:- http://stackoverflow.com/questions/12045893/which-are-the-most-important-media-queries-to-use-in-cre...

// 

/* Landscape phones and down */
@media (max-width: 480px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Large desktop */
@media (min-width: 1200px) { ... }

As mentioned by Lokesh, there is no hard and fast rule for this. It is more related to your webpage and its layout. 

I hope this would be helpful.

Thanks and Regards

Kautuk Sahni