Skip to content

Instantly share code, notes, and snippets.

@poteto
Created October 22, 2012 13:54
Show Gist options
  • Save poteto/3931614 to your computer and use it in GitHub Desktop.
Save poteto/3931614 to your computer and use it in GitHub Desktop.
Sass media queries
// Standard device screen widths
$iphone-portrait: 320px
$iphone-landscape: 480px
$ipad-portrait: 767px
$ipad-landscape: 980px
$desktop: 1224px
$desktop-large: 1824px
// General device targeting
// Use: Only use if you want the style to apply to many devices
// Example:
// +apply_to(smaller-than, iphone-portrait)
// will apply CSS to anything smaller than an iPhone-portrait
=apply_to($ltgt, $device)
$extrema: null
@if $ltgt == less-than
$extrema: max
@if $ltgt == greater-than
$extrema: min
@if $device == iphone-landscape
@media only screen and (#{$extrema}-width: $iphone-landscape)
@content
@if $device == iphone-portrait
@media only screen and (#{$extrema}-width: $iphone-portrait)
@content
@if $device == ipad-landscape
@media only screen and (#{$extrema}-width: $ipad-landscape)
@content
@if $device == ipad-portrait
@media only screen and (#{$extrema}-width: $ipad-portrait)
@content
@if $device == desktop
@media only screen and (#{$extrema}-width: $desktop)
@content
@if $device == desktop-large
@media only screen and (#{$extrema}-width: $desktop-large)
@content
// Specific device targeting
// Use: Only use if you want the style to respond to one device
// Example:
// +respond_to(ipad-landscape)
// will apply CSS only to an iPad at landscape rotation
=respond-to($device)
@if $device == retina-display
@media only screen and (-webkit-min-device-pixel-ratio: 2)
@content
@if $device == iphone
@media only screen and (min-width: $iphone-portrait) and (max-width: $iphone-landscape)
@content
@if $device == iphone-landscape
@media only screen and (min-width: $iphone-portrait) and (max-width: $iphone-landscape) and (orientation: landscape)
@content
@if $device == iphone-portrait
@media only screen and (max-width: $iphone-portrait) and (max-width: $iphone-landscape) and (orientation: portrait)
@content
@if $device == ipad
@media only screen and (min-width: $ipad-portrait) and (max-width: $ipad-landscape)
@content
@if $device == ipad-landscape
@media only screen and (min-width: $ipad-portrait) and (max-width: $ipad-landscape) and (orientation: landscape)
@content
@if $device == ipad-portrait
@media only screen and (max-width: $ipad-portrait) and (max-width: $ipad-landscape) and (orientation: portrait)
@content
@if $device == desktop
@media only screen and (min-width: $desktop)
@content
@if $device == desktop-large
@media only screen and (min-width: $desktop-large)
@content
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment