Skip to content

Instantly share code, notes, and snippets.

@GrantSmithDoddle
Created September 18, 2019 11:53
Show Gist options
  • Save GrantSmithDoddle/c21d582b89efe86599147c6e8fcd112f to your computer and use it in GitHub Desktop.
Save GrantSmithDoddle/c21d582b89efe86599147c6e8fcd112f to your computer and use it in GitHub Desktop.
Sass media quieres
/* Small screen, non-retina */
=small
@media only screen and (min-width: 320px)
@content
=small-p
@media only screen and (min-width: 320px) and (orientation : portrait)
@content
=small-l
@media only screen and (min-width: 320px) and (orientation : landscape)
@content
/* Small screen, retina */
=small-retina
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px), only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 320px), only screen and (-o-min-device-pixel-ratio: 2/1) and (min-width: 320px), only screen and (min-device-pixel-ratio: 2) and (min-width: 320px), only screen and (min-resolution: 192dpi) and (min-width: 320px), only screen and (min-resolution: 2dppx) and (min-width: 320px)
@content
=small-retina-p
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px) and (orientation : portrait), only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 320px) and (orientation : portrait), only screen and (-o-min-device-pixel-ratio: 2/1) and (min-width: 320px) and (orientation : portrait), only screen and (min-device-pixel-ratio: 2) and (min-width: 320px) and (orientation : portrait), only screen and (min-resolution: 192dpi) and (min-width: 320px) and (orientation : portrait), only screen and (min-resolution: 2dppx) and (min-width: 320px) and (orientation : portrait)
@content
=small-retina-l
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px) and (orientation : landscape), only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 320px) and (orientation : landscape), only screen and (-o-min-device-pixel-ratio: 2/1) and (min-width: 320px) and (orientation : landscape), only screen and (min-device-pixel-ratio: 2) and (min-width: 320px), only screen and (min-resolution: 192dpi) and (min-width: 320px) and (orientation : landscape), only screen and (min-resolution: 2dppx) and (min-width: 320px) and (orientation : landscape)
@content
/* Medium screen, non-retina */
=medium
@media only screen and (min-width: 700px)
@content
=medium-p
@media only screen and (min-width: 700px) and (orientation : portrait)
@content
=medium-l
@media only screen and (min-width: 700px) and (orientation : landscape)
@content
/* Medium screen, retina */
=medium-retina
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 700px), only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 700px),only screen and (-o-min-device-pixel-ratio: 2/1) and (min-width: 700px), only screen and (min-device-pixel-ratio: 2) and (min-width: 700px), only screen and (min-resolution: 192dpi) and (min-width: 700px), only screen and (min-resolution: 2dppx) and (min-width: 700px)
@content
=medium-retina-p
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 700px) and (orientation : landscape), only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 700px) and (orientation : landscape), only screen and (-o-min-device-pixel-ratio: 2/1) and (min-width: 700px) and (orientation : landscape), only screen and (min-device-pixel-ratio: 2) and (min-width: 700px) and (orientation : landscape), only screen and (min-resolution: 192dpi) and (min-width: 700px), only screen and (min-resolution: 2dppx) and (min-width: 700px) and (orientation : landscape)
@content
=medium-retina-l
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 700px) and (orientation : landscape), only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 700px) and (orientation : landscape), only screen and (-o-min-device-pixel-ratio: 2/1) and (min-width: 700px) and (orientation : landscape), only screen and (min-device-pixel-ratio: 2) and (min-width: 700px) and (orientation : landscape), only screen and (min-resolution: 192dpi) and (min-width: 700px), only screen and (min-resolution: 2dppx) and (min-width: 700px) and (orientation : landscape)
@content
/* Large screen, non-retina */
=large
@media only screen and (min-width: 1300px)
@content
=large-p
@media only screen and (min-width: 1300px) and (orientation : portrait)
@content
=large-l
@media only screen and (min-width: 1300px) and (orientation : landscape)
@content
/* Large screen, retina
=large-retina
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1300px), only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 1300px), only screen and (-o-min-device-pixel-ratio: 2/1) and (min-width: 1300px), only screen and (min-device-pixel-ratio: 2) and (min-width: 1300px), only screen and (min-resolution: 192dpi) and (min-width: 1300px), only screen and (min-resolution: 2dppx) and (min-width: 1300px)
@content
=large-retina-p
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1300px) and (orientation : portrait), only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 1300px) and (orientation : portrait), only screen and (-o-min-device-pixel-ratio: 2/1) and (min-width: 1300px) and (orientation : portrait), only screen and (min-device-pixel-ratio: 2) and (min-width: 1300px) and (orientation : portrait), only screen and (min-resolution: 192dpi) and (min-width: 1300px) and (orientation : portrait), only screen and (min-resolution: 2dppx) and (min-width: 1300px) and (orientation : portrait)
@content
=large-retina-l
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1300px) and (orientation : landscape), only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 1300px) and (orientation : landscape), only screen and (-o-min-device-pixel-ratio: 2/1) and (min-width: 1300px) and (orientation : landscape), only screen and (min-device-pixel-ratio: 2) and (min-width: 1300px) and (orientation : landscape), only screen and (min-resolution: 192dpi) and (min-width: 1300px) and (orientation : landscape), only screen and (min-resolution: 2dppx) and (min-width: 1300px) and (orientation : landscape)
@content
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment