media_query.css

/*============================================================================
  Dependency-free breakpoint mixin
    - http://blog.grayghostvisuals.com/sass/sass-media-query-mixin/
==============================================================================*/
$min: min-width;
$max: max-width;

@mixin at-query ($constraint, $viewport1, $viewport2:null) {
  @if $constraint == $min {
    @media screen and ($min: $viewport1) {
      @content;
    }
  } @else if $constraint == $max {
    @media screen and ($max: $viewport1) {
      @content;
    }
  } @else {
    @media screen and ($min: $viewport1) and ($max: $viewport2) {
      @content;
    }
  }
}

$viewportIncrement: 1px;
$siteWidth: 1050px;
$small: 590px;
$medium: 768px;
$large: 769px;
$xlarge: $siteWidth + $viewportIncrement;

$postSmall: $small + $viewportIncrement;
$preMedium: $medium - $viewportIncrement;
$preLarge: $large - $viewportIncrement;

/* Mixin in use */

.tags--collection {
  max-width: 75%;
  margin: 0 auto 25px;
  
  /* writes a media query for min-width of 769 px
     li is going to get a display inline-block when
     viewport is 769 or WIDER
     => @media (min-width: 769px) {<do something css-ish> }*/
  @include at-query($min, $large) {
    li {
      display: inline-block;
    }
  }
  
  /* writes a media query for max-width of 590 px
     li is going to get a display block when
     viewport is up to 590px wide 
     => @media (max-width: 590px) {<do something css-ish> }*/
  @include at-query($max, $small) {
    li {
      display: block;
    }
  }

}

The Basics

This is how you can write media queries in CSS3

One example is using "min-width", and this means that something is going to get executed when the viewport (it can be the browser's window) is equal or WIDER than, in this case 700px. Or set a lower bound:
@media (min-width: 700px) {<do something css-ish> }

An other example is using "max-width", and this means that something is going to get executed when the viewport (it can be the browser's window) is THINER or equal than, in this case 700px. Or set an upper bound:
@media (max-width: 700px) {<do something css-ish>}

Then you can combine both to set lower and upper bounds. Using the AND key word:
@media screen and (min-width: 700px) and (max-width: 1600px) {<do something css-ish>}

In context

Function Definition

Now, with this CSS3 new information, we can see the function definition and easily understand that the first parameter asks for 'min-with', 'max-with' or 'nothing'. The second for the limit in px. And a third in case you want to pass two limits. Then in return it will write a media query to set a lower bound, upper bound or a 'SLICE' correspondently.

Variables

Surrounding the function (mixin) there are cool variable definitions to define sizes and post and pre sizes for transitions.