-1

I have some media queries in neat using ems. When using pixels you can do something like:

@media  (max-width: 640px) { ... }
@media (min-width: 641px) and (max-width: 768px) { ... }

When using ems these kind of queries would look like:

@media  (max-width: 40em) { ... }
@media (min-width: 41em) and (max-width: 48em) { ... }

As you can see in the first em media query there is 40 em and in the second media query there is 41 em. If we consider 1em is 16px, there is a gap of 16px. How can I handle this?

I could change the 41 em to 40 em, but then I have two media queries for 40em. This is especially annoying when using neat in combination with the outer-container and omega mixin in both media queries with different parameters for the omega mixin, for example 2n and 3n.

The problem is, is that the media query will satisfy for 40em both the 2n and 3n css rules, which gives some strange layouts. Now I can use the omega reset mixin. But I have read that this isn't good practice.

Am I missing something? Anyone has some good ideas to handle breakpoints using ems. I also could use only min-with in the media query, but then I still need the omega reset mixin.

TylerH
  • 20,799
  • 66
  • 75
  • 101
rsdrsd
  • 307
  • 1
  • 4
  • 13

3 Answers3

0

I would only work with max-widths, since they're friendlier for mobile users. This way the heaviest overrides are for wide screens.

EM's are numbers, and don't have to be solid ones. Maybe try using 40em and 40.1em, or even smaller?

vandijkstef
  • 407
  • 3
  • 8
  • But if I use 40.1 em, there still is a gap between 40 em and 40.1em. How is this handled? Is there a smallest em value? Currently I was only working with min-width, but for different omega in media queries I was forced to use a omega reset. If I use only max-width this I am also forced to use an omega reset. Or isn't it? – rsdrsd Dec 22 '15 at 08:27
  • Within the gap, none of the styles defined within the media blocks will be valid, so they won't be applied. Going for a 40.01em sounds solid enough, as pixels have the same problem. (I can imagine cases where the browser has half pixels, especially on retina) The only solid solution would be only using min- or max- – vandijkstef Dec 28 '15 at 22:20
0

Currently I am using only min-width instead of max-width with a mobile first approach. Thanks for the input.

rsdrsd
  • 307
  • 1
  • 4
  • 13
0

Try this -> em(640) and em(641)

http://bourbon.io/docs/#px-to-em

nob
  • 1