Last active
June 26, 2021 19:38
-
-
Save rkuhl/c2dafa018b4b8613eb69 to your computer and use it in GitHub Desktop.
CSS: media queries (bootstrap + mobile devices from stephen.io)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// # < 1200 # | |
@media (max-width: 1199px) { | |
} | |
// # < 992 # | |
@media (max-width: 991px) { | |
} | |
// # < 768 # | |
@media (max-width: 767px) { | |
} | |
// # < 480 # | |
@media (max-width: 479px) { | |
} | |
// # iPad in portrait & landscape # | |
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { | |
} | |
// # iPad in landscape # | |
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { | |
} | |
// # iPad in portrait # | |
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { | |
} | |
// # Retina iPad in portrait & landscape # | |
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2) { | |
} | |
// # Retina iPad in landscape # | |
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) { | |
} | |
// # Retina iPad in portrait # | |
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) { | |
} | |
// # iPad MINI in portrait & landscape # | |
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1) { | |
} | |
// # iPad MINI in landscape # | |
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1) { | |
} | |
// # iPad MINI in portrait # | |
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1) { | |
} | |
// # Smarphone in portrait & landscape # | |
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) { | |
} | |
// # Smarphone in landscape # | |
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) { | |
} | |
// # Smarphone in portrait # | |
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) { | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment