Forked from rkuhl/css_media_queries_bootstrap_devices.css
Created
June 23, 2021 13:53
-
-
Save ayse8888/c2516e6608e862a2e770eb6de992927a 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