Media Queriesをemで分岐させるMixin

pxベースでの分岐は限界

Media Queriesの分岐といえばpxベースがポピュラーですが、
2K/4K,iPhone4/5/6/plus,iPad mini/Air/Pro,Android 以下略と、
カオスな状態になりそれぞれ指定するのが手間すぎるため、
pxベースでの指定は限界な気がします。

そこで、emで分岐するMixinをオススメします。

Sass

@mixin breakpoint($point) {
   @if $point == desktop {
        @media (min-width: 90.063em) { @content ; }
    }
    @else if $point == laptop {
        @media (min-width: 64.063em) and (max-width: 90em) { @content ; }
    }
    @else if $point == tablet {
        @media (min-width: 40.063em) and (max-width: 64em) { @content ; }
    }
    @else if $point == mobileonly {
        @media (max-width: 40em)  { @content ; }
    }
}

CSS

div{
    @include breakpoint(mobileonly) {
        margin: 8px;
    }
    @include breakpoint(tablet) {
        margin: 16px;
    }
    @include breakpoint(laptop) {
        margin: 24px;
    }
    @include breakpoint(desktop) {
        margin: 32px;
    }
}

laptopはWXGAデバイスで適応されます。

2016/06/30 追記
ベースのフォントサイズを16pxとしています