Illogical behaviour of `$mdMedia` – what should happen at 600, 960?

[typeofweb]

I think the behaviour of $mdMedia service is illogical and inconsistent with CSS media queries.

Take a look at $mdConstant:

MEDIA: {
  'sm': '(max-width: 600px)',
  'gt-sm': '(min-width: 600px)',
  'md': '(min-width: 600px) and (max-width: 960px)',
  'gt-md': '(min-width: 960px)',
  'lg': '(min-width: 960px) and (max-width: 1200px)',
  'gt-lg': '(min-width: 1200px)'
},

It seems illogical that sm and gt-sm are both true at 600px. The same for md and gt-md at 960px, and lg and gt-lg at 1200px. So this layout will break at 600px:

<div ng-if="$mdMedia('sm')">content for mobile</div>
<div ng-if="$mdMedia('gt-sm')">content for other devices</div>

Moreover, this behaviour is inconsistent with CSS media queries:

@media (max-width: 599px) { ... }
@media (min-width: 600px) { ... }
@media (min-width: 600px) and (max-width: 959px) { ... }
@media (min-width: 960px) { ... }
@media (min-width: 960px) and (max-width: 1199px) { ... }
@media (min-width: 1200px) { ... }

Is there any good reason for that? I suggest we fix it so $mdMedia('sm') and $mdMedia('gt-sm') won't return true at the same time. What are your thoughts?
I can make a pull request once we agree on the solution.

[JakubJagoda]

It seems illogical that sm and gt-sm are both true at 600px

Especially that everywhere in the docs, sm is referred as "devices less than 600px wide" and gt-sm as "devices greater than 600px wide". So I'd at least understand if in case of 600px wideness, these selectors both returned false (as "less" != "less or equal", same for "greater"). But still, they shouldn't return same value.