Fixed Breakpoints - Post ID 265596

User 300493 Photo


Registered User
59 posts

Just a question to those who may know the answer.

I can understand the need for breakpoints. What I am trying to understand is why have the fixed points where they are. Why at 499px (when working on Mobile up)? And why not at 499px when working desktop down?

I also notice that in RBB/3 there are 3 fixed breakpoints and RBB/4 has 4 fixed points - even as wide as 1200px which is outside the screen size of both my desktop screens and that of my standard 15.6" laptop.

Back to the question - not why they are there, but why at the points where they have been placed.
User 434929 Photo


Ambassador
937 posts

Those are Default Media Queries by Zurb Foundation Framework

Foundation for Sites has three core breakpoints:

Small: any screen.
Medium: any screen 640 pixels or wider.
Large: any screen 1024 pixels or wider.

Read More
http://foundation.zurb.com/sites/docs/media-queries.html
Guys at coffeecup are awesometacular.
User 2846109 Photo


Ambassador
340 posts

Yeah, I just think those are the default breakpoint that each of the frameworks have. Bootstrap has default breakpoints as well.

http://v4-alpha.getbootstrap.com/layout/overview/

Regarding the 1200px breakpoint. 1920x1080 monitor resolutions are pretty common these days (as well as larger ones). Honestly 1200px wide displays (laptops and desktops) are getting dated at this point. 1280 was a standard 17" monitor width and most monitors being sold are probably much larger at this point.
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)
User 300493 Photo


Registered User
59 posts

I do understand that these are the default breakpoints and I actually see the value of having them

What I am trying to understand is WHY the "first" breakpoint is at 499px/544px/640px/768px, depending on which version of the responsive software you use. Surely 499px was picked for a reason, so what was the reason to change that to 768px in the next program. Likewise, the last breakpoint is set at 1024px/1200px, again depending on program version.

Or am I right in thinking these numbers are thumbsucks?
User 2846109 Photo


Ambassador
340 posts

That's a good question. I'm not really sure how everyone came up with the default breakpoints. Bootstrap is open source so maybe the community came up with them? Not sure about the other apps. If you find any info let us know!
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.