Responsive Foundation 6.0.0

A safe way to including responsive styles on old browers which do not fully support media queries, such as IE8.

All media queries using this mixin are mobile-first (min-width). This mixin will take all reponsive styles up to a certain point and print them in the order they're written in the ie.css stylesheet, up until the default screen width you set to support in IE8 and below.

In most cases, you won't have to change this from $lg, but you can always check Google Analytics to see what the most used screen size is for your site's older IE users if you like, and set it to that.

This mixin no longer supports custom media queries like max-width as of 2.0, because those styles do not generally need to be included for old IE to be usable. Instead, you should use a plain CSS media query, which will not interfere with older browsers and degrade gracefully.

By default, you'll use this mixin for all your responsive styles, and should only have a few very minor exceptions in media queries.

Examples

Change the background of a callout from black to white on tablets in vertical orientation and larger.

			.callout {
					background: $color-grayscale-0;
		
					@include breakpoint( $xs ) {
						background: $color-grayscale-f;
					}
				}
		

Override the background on a callout to white, but only on the smallest phones.

			.callout {
					@media screen and ( max-width: $xs - 1 ) {
						background: $color-grayscale-f;
					}
				}