Breakpoint

.container-1 {
  @include breakpoint('md+') {
    background-color: red; // background will be red at md and larger
  }
}

.container-2 {
  @include breakpoint('md-') {
    background-color: green; // background will be green at md and smaller
  }
}

.container-3 {
  @include breakpoint('md') {
    background-color: blue; // background will be green at only md
  }
}

.container-4 {
  @include breakpoint('md') {
    background-color: blue; // background will be green at only md
  }
}

.container-5 {
  @include breakpoint('md+', '(min-height: 680px)') {
    background-color: orange; // background will orange at md and larger and when also larger than 680px tall
  }
}

.container-6 {
  @include breakpoint(null, 'hover') {
    background-color: purple; // background will purple only on devices with mouse pointers
  }
}

.container-7 {
  @include breakpoint('md+', 'hover') {
    background-color: pink; // background will pink at md and larger, only on devices with mouse pointers
  }
}

.container-8 {
  @include breakpoint(null,'ie11') {
    background-color: brown; // background will be brown in IE11
  }
}

.container-9 {
  @include breakpoint('md+','ie11') {
    background-color: beige; // background will be beige at md and larger only in IE11
  }
}

@media screen and (min-width: 650px) {
  .container-1 {
    background-color: red;
  }
}

@media screen and (max-width: 990px) {
  .container-2 {
    background-color: green;
  }
}

@media screen and (min-width: 650px) and (max-width: 990px) {
  .container-3 {
    background-color: blue;
  }
}

@media screen and (min-width: 650px) and (max-width: 990px) {
  .container-4 {
    background-color: blue;
  }
}

@media screen and (min-width: 650px) and (min-height: 680px) {
  .container-5 {
    background-color: orange;
  }
}

@media (-moz-touch-enabled: 0), (pointer: fine) {
  .container-6 {
    background-color: purple;
  }
}

@media screen and (min-width: 650px) and (-moz-touch-enabled: 0), screen and (min-width: 650px) and (pointer: fine) {
  .container-7 {
    background-color: pink;
  }
}

@media screen and (-ms-high-contrast: none), screen and (-ms-high-contrast: active) {
  .container-8 {
    background-color: brown;
  }
}

@media screen and (min-width: 650px) and (-ms-high-contrast: none), screen and (min-width: 650px) and (-ms-high-contrast: active) {
  .container-9 {
    background-color: beige;
  }
}