-2

I researched and people all over the internet are using different breakpoints these days when working in ems. Seems like most are just using the frameworks (bootstrap, foundation) and their respective fluid grids instead. Now that most mobiles have a decent screen-size and resolution, I think I may not have to define my breakpoints at less than 40ems (640px).

Of course, breakpoints only need to be defined when the layout actually breaks but I need a base to work from.

Currently, my breakpoints are:

@media all and (min-width: 40em)   /* 640px - for tablets*/ 
@media all and (min-width: 62.5em)   /* 1000px - for desktops*/

I have seen some 25em breakpoints floating around on the web. Do I need the 25em breakpoint in a mobile-first design? Of course, it depends if you targeting a specific user-base but for a generic base, is it needed? Also what breakpoints do you generally find yourself defining?

For example, the author of this article also seems to be using 24em in a mobile first design.

Tomatoes
  • 91
  • 1
  • 7
  • I suggest that you use the new bootstrap 3: [1]: http://stackoverflow.com/questions/17919225/twitters-bootstrap-3-grid-changing-breakpoint-and-removing-padding – Oualid KTATA Dec 02 '13 at 16:26
  • Good call using ems for media queries. Pixels can [cause some problems.](http://css-tricks.com/zooming-squishes/) – Timothy Miller Dec 02 '13 at 16:29

1 Answers1

2

This is a pretty good article:

http://bradfrostweb.com/blog/post/7-habits-of-highly-effective-media-queries/

Basically, they propose it's entirely dependent on the website your creating - increase the width of your layout till it looks like shit, then define that as a breakpoint.

Makes sense to me. I have to admit, I'm struggling to shirk off the bad habit of defining break points in pixels, but I'm getting there! :)

Matthew Trow
  • 2,712
  • 1
  • 17
  • 15