Skip to content

Instantly share code, notes, and snippets.

@davekiss
Last active December 11, 2015 02:49
Show Gist options
  • Save davekiss/4533676 to your computer and use it in GitHub Desktop.
Save davekiss/4533676 to your computer and use it in GitHub Desktop.
/* Smartphones (portrait and landscape) */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px) {
}
/* Smartphones (landscape) */
@media only screen
and (min-width: 321px) {
}
/* Smartphones (portrait) */
@media only screen
and (max-width: 320px) {
}
/* iPads (portrait and landscape) */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px) {
}
/* iPads (landscape) */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape) {
}
/* iPads (portrait) */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait) {
}
/* Desktops and laptops */
@media only screen
and (min-width: 1224px) {
}
/* Large screens */
@media only screen
and (min-width: 1824px) {
}
/* iPhone 4 + iPhone 5 */
@media
only screen and (max-device-width: 1136px) and (min-device-width: 960px) and (device-height: 640px),
only screen and (max-device-height: 1136px) and (min-device-height: 960px) and (device-width: 640px) {
}
/* Small screen, 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) {
}
/* Medium screen, 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) {
}
/* Large screen, 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) {
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment