Media Queries in Sass

_media-queries.scss

// Dimensions of devices
// iPad Retina - 1536x2048
// iPad - 768x1024
// iPhone - 320x480
// iPhone Retina - 640x960

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

@mixin mobile-portrait-only {
	@media only screen and (max-width : 320px) {
		@content;
	}
}

@mixin mobile-landscape-only {
	@media only screen and (min-width : 321px) and (max-width : 480px) {
		@content;
	}
}

@mixin mobile-landscape-and-below {
	@media only screen and (max-width : 480px) {
		@content;
	}
}

@mixin mobile-landscape-and-up {
	@media only screen and (min-width : 321px) {
		@content;
	}
}

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

@mixin tablet-portrait-only {
	@media only screen and (min-width : 481px) and (max-width : 768px) {
		@content;
	}
}

@mixin tablet-portrait-and-below {
	@media only screen and (max-width : 768px) {
		@content;
	}
}

@mixin tablet-portrait-and-up {
	@media only screen and (min-width : 481px) {
		@content;
	}
}

@mixin tablet-landscape-only {
	@media only screen and (min-width : 769px) and (max-width : 1024px) {
		@content;
	}
}

@mixin tablet-landscape-and-below {
	@media only screen and (max-width : 1024px) {
		@content;
	}
}

@mixin tablet-landscape-and-up {
	@media only screen and (min-width : 769px) {
		@content;
	}
}

@mixin desktop-and-up {
	@media only screen and (min-width : 1025px) {
		@content;
	}
}

@mixin desktop-and-below {
	@media only screen and (max-width : 1823px) {
		@content;
	}
}

@mixin desktop-only {
	@media only screen and (min-width : 1025px) and (max-width : 1823px) {
		@content;
	}
}

@mixin desktop-and-below {
	@media only screen and (min-width : 1025px) and (max-width : 1823px) {
		@content;
	}
}

@mixin wide-screen-only {
	@media only screen and (min-width : 1824px) {
		@content;
	}
}

@mixin retina {
	@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
		@content;
	}
}