This is just a few ramshackle mixins I put together based on a theory. Don't know if they're suitable for production yet, but check it out. Please note that it's all only supported by `min/max-width`, no pixel density or orientation conditions, or even anything other than the `screen` media type.

scss-dynamic-breakpoint-media-queries.scss

/*
 * SCSS Dynamic Breakpoint Media Queries
 * Author: Matt Scheurich <[email protected]>
 *
 * This is just a few ramshackle mixins I put together based on a theory.
 * Don't know if they're suitable for production yet, but check it out.
 * Please note that it's all only supported by `min/max-width`, no pixel
 * density or orientation, or even anything other than the `screen` media type.
 */

// Breakpoints
$width-desktop:       1600px;
$width-laptop-max:    $width-desktop - 1;
$width-laptop:        1200px;
$width-tablet-l-max:  $width-laptop - 1;
$width-tablet-l:      1024px;
$width-tablet-p-max:  $width-tablet-l - 1;
$width-tablet-p:      800px;
$width-mobile-l-max:  $width-tablet-p - 1;
$width-mobile-l:      600px;
$width-mobile-p-max:  $width-mobile-l - 1;
$width-mobile-p:      300px;

// Single media query
@mixin media( $min-width: 0, $max-width: false, $media: 'screen' ) {
  $media-query: '#{$media}';

  @if $min-width >= 0 {
    $media-query: '#{$media-query} and (min-width: #{$min-width})';
  }

  @if $max-width and $max-width >= 0 {
    $media-query: '#{$media-query} and (max-width: #{$max-width})';
  }

  @media #{$media-query} {
    @content;
  }
}

// Multiple media queries (using only device names; see device-#{$device} )
// @example @include devices(mobile, tablet) { @content; }
@mixin devices($devices...) {
  $media-query: '';
  $i: 0;
  $total-devices: length($devices);

  @if $total-devices > 0 {
    // Generate media query
    @each $device in $devices {
      $i: $i + 1;

      // Add multiple
      @if $i > 1 {
        $media-query: '#{$media-query},';
      }

      // Desktop
      @if $device == 'desktop' {
        $media-query: '#{$media-query} screen and (min-width: #{$width-desktop})';

      // Laptop
      } @else if $device == 'laptop' {
        $media-query: '#{$media-query} screen and (min-width: #{$width-laptop}) and (max-width: #{$width-laptop-max})';

      // Computer
      } @else if $device == 'computer' {
        $media-query: '#{$media-query} screen and (min-width: #{$width-tablet-l})';

      // Tablet (Landscape)
      } @else if $device == 'tablet-l' {
        $media-query: '#{$media-query} screen and (min-width: #{$width-tablet-l}) and (max-width: #{$width-tablet-l-max})';

      // Tablet (Portrait)
      } @else if $device == 'tablet-p' {
        $media-query: '#{$media-query} screen and (min-width: #{$width-tablet-p}) and (max-width: #{$width-tablet-p-max})';

      // Tablet
      } @else if $device == 'tablet' {
        $media-query: '#{$media-query} screen and (min-width: #{$width-tablet-p}) and (max-width: #{$width-tablet-l-max})';

      // Mobile (Landscape)
      } @else if $device == 'mobile-l' {
        $media-query: '#{$media-query} screen and (min-width: #{$width-mobile-l}) and (max-width: #{$width-mobile-l-max})';

      // Mobile (Portrait)
      } @else if $device == 'mobile-p' {
        $media-query: '#{$media-query} screen and (max-width: #{$width-mobile-p-max})';

      // Mobile
      } @else if $device == 'mobile' {
        $media-query: '#{$media-query} screen and (max-width: #{$width-mobile-l-max})';
      }
    }

    // Doits!
    @media #{$media-query} {
      @content;
    }
  }
}

// Desktop
@mixin device-desktop {
  @include media($width-desktop) {
    @content;
  }
}

// Laptop
@mixin device-laptop {
  @include media($width-laptop, $width-laptop-max) {
    @content;
  }
}

// Computer (tablet-l, laptop, desktop)
@mixin device-computer {
  @include media($width-tablet-l) {
    @content;
  }
}

// Tablet (landscape)
@mixin device-tablet-l {
  @include media($width-tablet-l, $width-tablet-l-max) {
    @content;
  }
}

// Tablet (portrait)
@mixin device-tablet-p {
  @include media($width-tablet-p, $width-tablet-p-max) {
    @content;
  }
}

// Tablet
@mixin device-tablet {
  @include media($width-tablet-p, $width-tablet-l-max) {
    @content;
  }
}

// Mobile (landscape)
@mixin device-mobile-l {
  @include media($width-mobile-l, $width-mobile-l-max) {
    @content;
  }
}

// Mobile (portrait)
@mixin device-mobile-p {
  // Technically it'd be from 0 to next breakpoint...
  @include media(0, $width-mobile-p-max) {
    @content;
  }
}

// Mobile
@mixin device-mobile {
  @include media(0, $width-mobile-l-max) {
    @content;
  }
}

// Show/hide `display` type depending on device
$display-types: ('inline', 'block', 'inline-block', 'table');

@mixin show-hide-display-types($class-name: false) {
  @if $class-name {
    $class-name: '-#{$class-name}';
  }

  // Show/hide each display type
  @each $display-type in $display-types {
    // Set specific .show class for display-type
    .show#{$class-name}-#{$display-type} {
      display: $display-type;
    }
  }

  .hide#{$class-name} {
    display: none;
  }
}

@mixin hide-display-types-by-device($devices...) {
  $hide-selector: '';
  $i: 0;

  @each $device in $devices {
    @each $display-type in $display-types {
      $i: $i + 1;

      // Add comma for multiple devices
      @if $i > 1 {
        $hide-selector: '#{$hide-selector}, ';
      }

      // Add $device-type
      $hide-selector: '#{$hide-selector} .show-#{$device}-#{$display-type}';
    }
  }

  #{$hide-selector} {
    display: none;
  }
}

// Show/hide elements based on @media breakpoints
@include device-computer {
  @include show-hide-display-types('computer');
  @include hide-display-types-by-device('tablet', 'mobile');
}

@include device-desktop {
  @include show-hide-display-types('desktop');
  @include hide-display-types-by-device('tablet', 'mobile');
}

@include device-laptop {
  @include show-hide-display-types('laptop');
  @include hide-display-types-by-device('tablet', 'mobile');
}

@include device-tablet {
  @include show-hide-display-types('tablet');
  @include hide-display-types-by-device('computer', 'desktop', 'laptop', 'mobile');
}

@include device-mobile {
  @include show-hide-display-types('mobile');
  @include hide-display-types-by-device('computer', 'desktop', 'laptop', 'tablet');
}