/* Based on:
- http://stephen.io/mediaqueries
- https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ */
/* iPhone X in portrait & landscape */ @media only screen and (min-width : 375px) and (max-width : 812px)
}
/* iPhone X in landscape */ @media only screen and (min-width : 375px) and (max-width : 812px) and (orientation : landscape) {
}
/* iPhone X in portrait */ @media only screen and (min-width : 375px) and (max-width : 812px) and (orientation : portrait) {
}
/* iPhone 6, 7, & 8 in portrait & landscape */ @media only screen and (min-width : 375px) and (max-width : 667px) {
}
/* iPhone 6, 7, & 8 in landscape */ @media only screen and (min-width : 375px) and (max-width : 667px) and (orientation : landscape) {
}
/* iPhone 6, 7, & 8 in portrait */ @media only screen and (min-width : 375px) and (max-width : 667px) and (orientation : portrait) {
}
/* iPhone 6, 7, & 8 Plus in portrait & landscape */ @media only screen and (min-width : 414px) and (max-width : 736px) {
}
/* iPhone 6, 7, & 8 Plus in landscape */ @media only screen and (min-width : 414px) and (max-width : 736px) and (orientation : landscape) {
}
/* iPhone 6, 7, & 8 Plus in portrait */ @media only screen and (min-width : 414px) and (max-width : 736px) and (orientation : portrait) {
}
/* iPhone 6 in portrait & landscape */ @media only screen and (min-width : 375px) and (max-width : 667px) {
}
/* iPhone 6 in landscape */ @media only screen and (min-width : 375px) and (max-width : 667px) and (orientation : landscape) {
}
/* iPhone 6 in portrait */ @media only screen and (min-width : 375px) and (max-width : 667px) and (orientation : portrait) {
}
/* iPhone 6 Plus in portrait & landscape */ @media only screen and (min-width : 414px) and (max-width : 736px) {
}
/* iPhone 6 Plus in landscape */ @media only screen and (min-width : 414px) and (max-width : 736px) and (orientation : landscape) {
}
/* iPhone 6 Plus in portrait */ @media only screen and (min-width : 414px) and (max-width : 736px) and (orientation : portrait) {
}
/* iPhone 5 & 5S in portrait & landscape */ @media only screen and (min-width : 320px) and (max-width : 568px) {
}
/* iPhone 5 & 5S in landscape */ @media only screen and (min-width : 320px) and (max-width : 568px) and (orientation : landscape) {
}
/* iPhone 5 & 5S in portrait */ @media only screen and (min-width : 320px) and (max-width : 568px) and (orientation : portrait) {
}
/* iPhone 2G, 3G, 4, 4S Media Queries It's noteworthy that these media queries are also the same for iPod Touch generations 1-4. */
/* iPhone 2G-4S in portrait & landscape */ @media only screen and (min-width : 320px) and (max-width : 480px) {
}
/* iPhone 2G-4S in landscape */ @media only screen and (min-width : 320px) and (max-width : 480px) and (orientation : landscape) {
}
/* iPhone 2G-4S in portrait */ @media only screen and (min-width : 320px) and (max-width : 480px) and (orientation : portrait) {
}
/* iPad in portrait & landscape */ @media only screen and (min-width : 768px) and (max-width : 1024px) {
}
/* iPad in landscape */ @media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape) {
}
/* iPad in portrait */ @media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) {
}
/* Galaxy S3 portrait and landscape */ @media screen and (width: 320px) and (height: 640px)
}
/* Galaxy S3 portrait */ @media screen and (width: 320px) and (height: 640px) and (orientation: portrait) {
}
/* Galaxy S3 landscape */ @media screen and (width: 320px) and (height: 640px) and (orientation: landscape) {
}
/* Galaxy S4 portrait and landscape */ @media screen and (width: 320px) and (height: 640px)
}
/* Galaxy S4 portrait */ @media screen and (width: 320px) and (height: 640px) and (orientation: portrait) {
}
/* Galaxy S4 landscape */ @media screen and (width: 320px) and (height: 640px) and (orientation: landscape) {
}
/* Galaxy S5 portrait and landscape */ @media screen and (width: 360px) and (height: 640px)
}
/* Galaxy S5 portrait */ @media screen and (width: 360px) and (height: 640px) and (orientation: portrait) {
}
/* Galaxy S5 landscape */ @media screen and (width: 360px) and (height: 640px) and (orientation: landscape) {
}
/* HTC One portrait and landscape */ @media screen and (width: 360px) and (height: 640px)
}
/* HTC One portrait */ @media screen and (width: 360px) and (height: 640px) and (orientation: portrait) {
}
/* HTC One landscape */ @media screen and (width: 360px) and (height: 640px) and (orientation: landscape) {
}
/* iPad 3 & 4 Media Queries If you're looking to target only 3rd and 4th generation Retina iPads (or tablets with similar resolution) to add @2x graphics, or other features for the tablet's Retina display, use the following media queries. */
/* Retina iPad in portrait & landscape */ @media only screen and (min-width : 768px) and (max-width : 1024px) and (-webkit-min-pixel-ratio: 2) {
}
/* Retina iPad in landscape */ @media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape) and (-webkit-min-pixel-ratio: 2) {
}
/* Retina iPad in portrait */ @media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) and (-webkit-min-pixel-ratio: 2) {
}
/* iPad 1 & 2 Media Queries If you're looking to supply different graphics or choose different typography for the lower resolution iPad display, the media queries below will work like a charm in your responsive design! */
/* iPad 1 & 2 in portrait & landscape */ @media only screen and (min-width : 768px) and (max-width : 1024px) and (-webkit-min-pixel-ratio: 1) {
}
/* iPad 1 & 2 in landscape */ @media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape) and (-webkit-min-pixel-ratio: 1) {
}
/* iPad 1 & 2 in portrait */ @media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) and (-webkit-min-pixel-ratio: 1) {
}
/* iPad mini in portrait & landscape */ @media only screen and (min-width : 768px) and (max-width : 1024px) and (-webkit-min-pixel-ratio: 1) {
}
/* iPad mini in landscape */ @media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape) and (-webkit-min-pixel-ratio: 1) {
}
/* iPad mini in portrait */ @media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) and (-webkit-min-pixel-ratio: 1) {
}
/* Galaxy Tab 10.1 portrait and landscape */ @media (min-width: 800px) and (max-width: 1280px) {
}
/* Galaxy Tab 10.1 portrait */ @media (max-width: 800px) and (orientation: portrait) {
}
/* Galaxy Tab 10.1 landscape */ @media (max-width: 1280px) and (orientation: landscape) {
}
/* Asus Nexus 7 portrait and landscape */ @media screen and (width: 601px) and (height: 906px) and (-webkit-min-pixel-ratio: 1.331) and (-webkit-max-pixel-ratio: 1.332) {
}
/* Asus Nexus 7 portrait */ @media screen and (width: 601px) and (height: 906px) and (-webkit-min-pixel-ratio: 1.331) and (-webkit-max-pixel-ratio: 1.332) and (orientation: portrait) {
}
/* Asus Nexus 7 landscape */ @media screen and (width: 601px) and (height: 906px) and (-webkit-min-pixel-ratio: 1.331) and (-webkit-max-pixel-ratio: 1.332) and (orientation: landscape) {
}
/* Kindle Fire HD 7" portrait and landscape */ @media only screen and (min-width: 800px) and (max-width: 1280px) and (-webkit-min-pixel-ratio: 1.5) {
}
/* Kindle Fire HD 7" portrait */ @media only screen and (min-width: 800px) and (max-width: 1280px) and (-webkit-min-pixel-ratio: 1.5) and (orientation: portrait) {
}
/* Kindle Fire HD 7" landscape */ @media only screen and (min-width: 800px) and (max-width: 1280px) and (-webkit-min-pixel-ratio: 1.5) and (orientation: landscape) {
}
/* Kindle Fire HD 8.9" portrait and landscape */ @media only screen and (min-width: 1200px) and (max-width: 1600px) and (-webkit-min-pixel-ratio: 1.5) {
}
/* Kindle Fire HD 8.9" portrait */ @media only screen and (min-width: 1200px) and (max-width: 1600px) and (-webkit-min-pixel-ratio: 1.5) and (orientation: portrait) {
}
/* Kindle Fire HD 8.9" landscape */ @media only screen and (min-width: 1200px) and (max-width: 1600px) and (-webkit-min-pixel-ratio: 1.5) and (orientation: landscape) {
}
/* Laptops non-retina screens */ @media screen and (min-width: 1200px) and (max-width: 1600px) and (-webkit-min-pixel-ratio: 1) {
}
/* Laptops retina screens */ @media screen and (min-width: 1200px) and (max-width: 1600px) and (-webkit-min-pixel-ratio: 2) and (min-resolution: 192dpi) {
}
/* Apple Watch */ @media (max-width: 42mm) and (min-width: 38mm) {
}
/* Moto 360 Watch */ @media (max-width: 218px) and (max-height: 281px) {
}
Media Query to target Google Pixel 2 XL
/* Portrait */ @media screen and (width: 412px) and (height: 823px) and (orientation: portrait) {
}
/* Landscape */ @media screen and (width: 412px) and (height: 823px) and (orientation: landscape) {
}
/* Target Portrait and Landscape */ @media screen and (width: 412px) and (height: 823px) and (orientation: landscape) {
/* ##Device = Desktops ##Screen = 1281px to higher resolution desktops */
@media (min-width: 1281px) {
/* CSS */
}
/* ##Device = Laptops, Desktops ##Screen = B/w 1025px to 1280px */
@media (min-width: 1025px) and (max-width: 1280px) {
/* CSS */
}
/* ##Device = Tablets, Ipads (portrait) ##Screen = B/w 768px to 1024px */
@media (min-width: 768px) and (max-width: 1024px) {
/* CSS */
}
/* ##Device = Tablets, Ipads (landscape) ##Screen = B/w 768px to 1024px */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
/* CSS */
}
/* ##Device = Low Resolution Tablets, Mobiles (Landscape) ##Screen = B/w 481px to 767px */
@media (min-width: 481px) and (max-width: 767px) {
/* CSS */
}
/* ##Device = Most of the Smartphones Mobiles (Portrait) ##Screen = B/w 320px to 479px */
@media (min-width: 320px) and (max-width: 480px) {
/* CSS */
}