Advanced Media Queries

Breakpoint also allows you to write advanced media queries to query for anything you'd like! Any CSS Level 3 or Level 4 you'd like to write you're able to write using Breakpoint. Keep in mind, though, that if if a browser doesn't support a specific media query (such as the Level 4 media queries), Sass won't give them support for said media queries.

Media Types

You can include a media type in your media query definition. Media types must be the first item in your media query, and can include only and not queries. According to the standard, you may omit the all media type if using it, so to make for more concise media queries we do so. If you would like the all media type to print out, set $breakpoint-force-media-all: true;

Note: You need to wrap keywords with media types in quotes, like so: $media-not: 'not print' and $media-not-plus-fenced: 'not print' 500px 700px;

$media: 'not screen' 700px;

#foo {
  @include breakpoint($media) {
    content: 'Media';
  }
}

@media not screen and (min-width: 700px) {
  #foo {
    content: 'Media';
  }
}

Media Query Pairs

You can easily write a a paired min/max media query by writing the feature and the two values.

$custom-pair: (height 421px 876px);

#foo {
  @include breakpoint($custom-pair) {
    content: 'Custom Pair';
  }
}

@media (min-height: 421px) and (max-height: 876px) {
  #foo {
    content: 'Custom Pair';
  }
}

Compound Media Queries

You can combine multiple feature queries into a compound media query, allowing for many features to be true in order for the query to pass.

$print-land: print monochrome (orientation landscape) (min-height 8.5in);

#foo {
  @include breakpoint($print-land) {
    content: 'Monochrome Print in Landscape';
  }
}

@media print and (monochrome) and (orientation: landscape) and (min-height: 8.5in) {
  #foo {
    content: 'Monochrome Print in Landscape';
  }
}

Or Queries

You can also write OR media queries, allowing you to write multiple different basic or compound media queries and have them apply if any of the sets of queries match.

$pair-landscape: screen 321px 543px, handheld (orientation portrait);

#foo {
  @include breakpoint($pair-landscape) {
    content: 'Screen media type between 300px and 500px OR Handheld media type in Portrait';
  }
}

@media screen and (min-width: 321px) and (max-width: 543px), handheld and (orientation: portrait) {
  #foo {
    content: 'Screen media type between 300px and 500px OR Handheld media type in Portrait';
  }
}

Resolution Media Queries

Breakpoint makes it easy to write cross-browser compatible resolution media queries. If you write a normal resolution media query, Breakpoint will convert it to the non-standard -webkit-device-pixel-ratio and -moz-device-pixel-ratio media queries to allow them to work across those browsers. If you would like to write a device-pixel-ratio media query, you should write the standard resolution media query using and use dppx units, and it will convert it to the non-standard -webkit-device-pixel-ratio, -moz-device-pixel-ratio, and fallback dpi unit media queries to allow them to be supported everywhere. To disable the automatic conversion, set $breakpoint-resolutions: false;.

// Resolution media queries are a pain. Breakpoint makes them easy. We use the standard DPPX units.
$hidpi: min-resolution 1.5dppx;
$cross-reso: max-resolution 143dpi;

#foo {
  @include breakpoint($hidpi) {
    content: 'Device Pixel Ratio of at least 1.5';
  }

  @include breakpoint($cross-reso) {
  	content: 'Cross Browser Resolution Query'
  }
}

/* Breakpoint will transform the DPPX unit into cross-browser compatible resolution queries and DPI units into cross-browser DPR queries! */
@media (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
  #foo {
    content: 'Device Pixel Ratio of at least 1.5';
  }
}

@media (max-resolution: 143dpi), (-webkit-max-device-pixel-ratio: 1.48958), (max--moz-device-pixel-ratio: 1.48958) {
  #foo {
    content: "Cross Browser Resolution Query";
  }
}