Menu icon Foundation
Why doesn't Foundation include a smaller breakpoint than 640?

As the title says. Just curious the thought process behind not including an extra small breakpoint at either 320 or at least 480? Is 320/480 not really needed anymore with all the high dp mobile screens? I know a lot of people still use them. The obvious answer is content should always dictate breakpoints, but F5 has some pretty good coverage except for the extra smaller screens. I've ran into problems with developers complaining they need one smaller breakpoint than the max width 640.

breakpointResponsivemedia query

As the title says. Just curious the thought process behind not including an extra small breakpoint at either 320 or at least 480? Is 320/480 not really needed anymore with all the high dp mobile screens? I know a lot of people still use them. The obvious answer is content should always dictate breakpoints, but F5 has some pretty good coverage except for the extra smaller screens. I've ran into problems with developers complaining they need one smaller breakpoint than the max width 640.

Steve Trask about 5 years ago

Hi Ryan,

I think you are right it is a common size due the screen ppi, most site designs would not dictate that you require to adjust the content again and if you do need another you can just add it in.I think the 3 breakpoints are just the average & most common that are used. Remember Foundation is to be built on and in F4 there was no medium breakpoint!

hope this helps

Steve

Karl Ward about 5 years ago

The idea is that all devices below 640 px width are considered 'small' (small mobile devices) and can usually all inherit the same layout. Personally I don't see why you would want a different layout on a 480px screen than a 640px screen ... both the devices fit in your hand. In most cases of 'responsive design', this size should generally be a single design, normally a single column. Basically < 640 px is considered a mobile device screen and the importance of variations in design below this seems unproductive.

Also, it is important to limit the amount of general breakpoints for practical- and aesthetic reasons. Foundation has a 'fluid' layout where the breakpoints only trigger certain events that break certain layout aspects, but the content will still flow naturally within the width of the device.

Keep in mind, a high-dp screen like iphone retina still counts as a 320px screen in terms of css and media query, although technically it is a 640 px screen implementing 'pixel-doubling'.