The mixins below helps target small, medium, and large size screens for Zurb foundation 4. This also helps IE8 to be targeted. You can see IE8 being targeted in the large() mixin. It has .lt-ie9 being added on all specified large styling. This helped me a lot since IE 8 does not have media queries. Instead of targeting with a media query it targ…

example-media-query-scss-1-mixins.scss

@mixin small() {
  @media only screen and (max-width: 767px) {
  	@content;
	}
}

@mixin medium() {
	@media only screen and (min-width: 768px) and (max-width: 1024px) {
		@content;
	}
}

@mixin large() {
	@media only screen and (min-width: 768px){
		@content;
	}
	.lt-ie9 & {
		@content;
	}
}

example-media-query-scss-2-example.scss

h1 {
  font-size: 14px;
  text-align: center;
}
 
@media only screen and (min-width: 768px) {
  h1 {
    font-size: 24px;
    text-align: left;
  }
}
 
.lt-ie9 h1 {
  font-size: 24px;
  text-align: left;
}

example-media-query-scss-3-output.css

h1 {
  font-size: 14px;
  text-align: center;
}

@media only screen and (min-width: 768px) {
  h1 {
    font-size: 24px;
    text-align: left;
  }
}

.lt-ie9 h1 {
  font-size: 24px;
  text-align: left;
}