Skip to content

Instantly share code, notes, and snippets.

@davidthingsaker
Created September 24, 2014 16:13
Show Gist options
  • Save davidthingsaker/30be328580d2a01f8a06 to your computer and use it in GitHub Desktop.
Save davidthingsaker/30be328580d2a01f8a06 to your computer and use it in GitHub Desktop.
SCSS / Sass mixin for responsive sites
$small-desktop: 960px;
$large-desktop: 1200px;
$handheld: 768px;
$handhelds-landscape: 1024px;
$mobile: 640px;
$mobile-landscape: 480px;
@mixin respond-to($media) {
@if $media == largeDesktop {
@media only screen and (min-width: $large-desktop) { @content }
}
@if $media == smallDesktop {
@media only screen and (max-width: $small-desktop) { @content; }
}
@if $media == handhelds {
@media only screen and (max-width: $handheld) { @content; }
}
@if $media == handhelds-landscape {
@media only screen and (min-device-width : $handheld)
and (max-device-width : $handhelds-landscape)
and (orientation : landscape){ @content; }
}
@if $media == mobile {
@media only screen and (max-width: $mobile) { @content; }
}
@if $media == mobile-portrait {
@media only screen and (max-width: $mobile)
and (orientation : portrait) { @content; }
}
@if $media == mobile-landscape {
@media only screen and (min-width: 320px)
and (max-width: $mobile-landscape)
and (orientation : landscape) { @content; }
}
@if $media == retina {
@media (-webkit-min-device-pixel-ratio: 2) { @content; }
}
@if $media == iphone5 {
@media only screen and (device-aspect-ratio: 40/71) { @content }
}
}
/* To be used like this */
body {
@include respond-to(handhelds){
// css code here
}
}
@EvgenyArtemov
Copy link

Didn't you mix up the resolutions for mobile and mobile landscape? :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment