Basic Media Queries

Breakpoint is designed to allow you to write your most common media queries as quickly as possible. The syntax is easy enough to use and advanced enough to allow you to write any media query you'd like under the sun.

Default Single and Pair

Out of the box, it assumes that your most common media queries are are min-width media queries or min-width/max-width media query pairs. It also assumes that you'd like to apply your media queries to all media types. With these, it's as simple as passing in either one or two numbers and it'll write out your media queries for you! You can change these defaults by setting the $breakpoint-default-media, $breakpoint-default-feature, and $breakpoint-default-pair variables, respectively.

// Your basic media queries, min-width and min/max width, are super easy!
$basic: 543px;
$pair: 456px 794px;

#foo {
  content: 'No Media Queries';

  @include breakpoint($basic) {
    content: 'Basic Media Query';
  }

  @include breakpoint($pair) {
    content: 'Paired Media Query';
  }
}

 /* Nested Breakpoint calls become separate media queries */
#foo {
  content: 'No Media Queries';
}

@media (min-width: 543px) {
  #foo {
    content: 'Basic Media Query';
  }
}

@media (min-width: 456px) and (max-width: 794px) {
  #foo {
    content: 'Paired Media Query';
  }
}

EM Based Media Queries

Breakpoint is also smart enough to be able to rewrite your non-em based media queries into em based media queries, which are much more accessible. To do so, simple set $breakpoint-to-ems: true; and all of your relevant media queries will be turned into ems!

/* Setting $breakpoint-to-ems: true will write Media Queries in Ems! */
@media (min-width: 33.9375em) {
  #foo {
    content: 'Basic Media Query';
  }
}

@media (min-width: 33.9375em) and (max-width: 49.625em) {
  #foo {
    content: 'Paired Media Query';
  }
}