Making your website responsive is as important as ever with everyone browsing the web on mobile devices. But with so many phones and tablets always changing screen sizes, it can get a little hectic.
So here is a cheat sheet of media queries for all popular devices that can come in especially handy when you need to target a specific viewport.
RESPONSIVE CSS MEDIA QUERIES FOR ALL DEVICES
- Media Queries for Mobile Phones
- • Apple iPhone
- • Samsung Galaxy
- • Google Pixel
- • LG
- • OnePlus
- Media Queries for Tablets
- • Apple iPad
- • Samsung Galaxy Tab
- • Amazon Kindle Fire
- Bootstrap Media Query Breakpoints
- • Mobile Smartphones
- • Tablets
- • Laptops/Desktops
- • Large Screens
Portrait and Landscape Media Query
Note: All media queries below are for both portrait and landscape viewing mode. However, if you need to target a specific orientation, you just need to add one line of code to any media query.
- • Portrait: and (orientation: portrait)
- Example:
@media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
/* CSS Rules Here */
}- • Landscape: and (orientation: landscape)
- Example:
@media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {
/* CSS Rules Here */
}
MEDIA QUERIES FOR MOBILE
Here is a list of media queries for mobile devices from Apple iPhone, Samsung Galaxy, OnePlus, to LG phones. Because these media queries are targeting specific devices rather than the browser, device-width were used instead of width.
A simple method to calculate the screen resolution of each device is to multiple the pixel-ratio by the min width and max width values.
APPLE iPHONE MEDIA QUERY
iPhone X, XS, 11 Pro
@media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3) {
/* CSS Rules Here */
}
iPhone XS Max, 11 Pro Max
@media only screen
and (min-device-width: 414px)
and (max-device-width: 896px)
and (-webkit-min-device-pixel-ratio: 3) {
/* CSS Rules Here */
}
iPhone XR, 11
@media only screen
and (min-device-width: 414px)
and (max-device-width: 896px)
and (-webkit-min-device-pixel-ratio: 2) {
/* CSS Rules Here */
}
iPhone 6, 6S, 7, 8
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
/* CSS Rules Here */
}
iPhone 6 Plus, 6S Plus, 7 Plus, 8 Plus
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3) {
/* CSS Rules Here */
}
iPhone 5, 5C, 5S, SE
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
/* CSS Rules Here */
}
SAMSUNG GALAXY MEDIA QUERY
Galaxy S8, S8+, S9, S9+, S10, S10+
@media only screen
and (min-device-width: 360px)
and (max-device-width: 740px)
and (-webkit-min-device-pixel-ratio: 4) {
/* CSS Rules Here */
}
Galaxy S6, S7, S7 Edge
@media only screen
and (min-device-width: 360px)
and (max-device-width: 640px)
and (-webkit-min-device-pixel-ratio: 4) {
/* CSS Rules Here */
}
Galaxy S4, S5, Note 3
@media only screen
and (min-device-width: 360px)
and (max-device-width: 640px)
and (-webkit-min-device-pixel-ratio: 3) {
/* CSS Rules Here */
}
Galaxy Note 10, 10+
@media only screen
and (min-device-width: 360px)
and (max-device-width: 718px)
and (-webkit-min-device-pixel-ratio: 2) {
/* CSS Rules Here */
}
Galaxy Note 8, 9
@media only screen
and (min-device-width: 360px)
and (max-device-width: 740px)
and (-webkit-min-device-pixel-ratio: 4) {
/* CSS Rules Here */
}
GOOGLE PIXEL MEDIA QUERY
Pixel 4
@media only screen
and (min-device-width: 412px)
and (max-device-width: 870px)
and (-webkit-min-device-pixel-ratio: 2.6) {
/* CSS Rules Here */
}
Pixel 4 XL
@media only screen
and (min-device-width: 412px)
and (max-device-width: 870px)
and (-webkit-min-device-pixel-ratio: 3.5) {
/* CSS Rules Here */
}
Pixel 3a
@media only screen
and (min-device-width: 412px)
and (max-device-width: 847px)
and (-webkit-min-device-pixel-ratio: 2.6) {
/* CSS Rules Here */
}
Pixel 3a XL
@media only screen
and (min-device-width: 412px)
and (max-device-width: 824px)
and (-webkit-min-device-pixel-ratio: 2.6) {
/* CSS Rules Here */
}
Pixel 3
@media only screen
and (min-device-width: 412px)
and (max-device-width: 824px)
and (-webkit-min-device-pixel-ratio: 2.6) {
/* CSS Rules Here */
}
Pixel 3 XL
@media only screen
and (min-device-width: 412px)
and (max-device-width: 847px)
and (-webkit-min-device-pixel-ratio: 3.5) {
/* CSS Rules Here */
}
Pixel 1, Pixel 2
@media only screen
and (min-device-width: 412px)
and (max-device-width: 732px)
and (-webkit-min-device-pixel-ratio: 2.6) {
/* CSS Rules Here */
}
Pixel 1 XL
@media only screen
and (min-device-width: 412px)
and (max-device-width: 732px)
and (-webkit-min-device-pixel-ratio: 3.5) {
/* CSS Rules Here */
}
Pixel 2 XL
@media only screen
and (min-device-width: 412px)
and (max-device-width: 824px)
and (-webkit-min-device-pixel-ratio: 3.5) {
/* CSS Rules Here */
}
LG PHONES MEDIA QUERY
LG G3, G4, G5
@media only screen
and (min-device-width: 360px)
and (max-device-width: 640px)
and (-webkit-min-device-pixel-ratio: 4) {
/* CSS Rules Here */
}
LG G2
@media only screen
and (min-device-width: 360px)
and (max-device-width: 640px)
and (-webkit-min-device-pixel-ratio: 3) {
/* CSS Rules Here */
}
ONEPLUS MEDIA QUERY
OnePlus 7
@media only screen
and (min-device-width: 412px)
and (max-device-width: 893px)
and (-webkit-min-device-pixel-ratio: 2.6) {
/* CSS Rules Here */
}
OnePlus 7T
@media only screen
and (min-device-width: 412px)
and (max-device-width: 916px)
and (-webkit-min-device-pixel-ratio: 2.6) {
/* CSS Rules Here */
}
OnePlus 7 Pro, 7T Pro
@media only screen
and (min-device-width: 412px)
and (max-device-width: 893px)
and (-webkit-min-device-pixel-ratio: 3.5) {
/* CSS Rules Here */
}
OnePlus 6, 6T
@media only screen
and (min-device-width: 412px)
and (max-device-width: 870px)
and (-webkit-min-device-pixel-ratio: 2.6) {
/* CSS Rules Here */
}
MEDIA QUERIES FOR TABLETS
Below are media queries for popular tablets from Apple iPad, Galaxy Tab, to Kindle Fire. These media queries are specific to the devices so device-width were once again used rather than width.
iPAD MEDIA QUERY
iPad 10.2″ (7th gen)
@media only screen
and (min-device-width: 810px)
and (max-device-width: 1080px)
and (-webkit-min-device-pixel-ratio: 2) {
/* CSS Rules Here */
}
iPad Pro 11″ (3rd Gen)
@media only screen
and (min-device-width: 834px)
and (max-device-width: 1194px)
and (-webkit-min-device-pixel-ratio: 2) {
/* CSS Rules Here */
}
iPad Air 10.5″ (3rd Gen), Pro 10.5″ (2nd Gen)
@media only screen
and (min-device-width: 834px)
and (max-device-width: 1112px)
and (-webkit-min-device-pixel-ratio: 2) {
/* CSS Rules Here */
}
iPad Pro 12.9″ (1st Gen), Pro 12.9″ (2nd Gen), Pro 12.9″ (3rd Gen)
@media only screen
and (min-device-width: 1024px)
and (max-device-width: 1366px)
and (-webkit-min-device-pixel-ratio: 2) {
/* CSS Rules Here */
}
iPad 3, 4, 5, 6, Mini 2, Mini 3, Mini 4, Mini 7.9″ (5th Gen), Air, Air 2, Pro 9.7″ (1st Gen)
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
/* CSS Rules Here */
}
iPad 1, 2, Mini
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
/* CSS Rules Here */
}
SAMSUNG GALAXY TAB MEDIA QUERY
Galaxy Tab (7.7″), Tab (8.9″), Tab (“10.1″), Tab 2 (10.1″), Tab 3 (10.1″), Note (10.1”)
@media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1) {
/* CSS Rules Here */
}
Galaxy Tab (7.0″), Tab 2 (7.0″)
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
/* CSS Rules Here */
}
AMAZON KINDLE FIRE MEDIA QUERY
Kindle Fire HDX 8.9″
@media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 2) {
/* CSS Rules Here */
}
Kindle Fire HDX 7″
@media only screen
and (min-device-width: 600px)
and (max-device-width: 960px)
and (-webkit-min-device-pixel-ratio: 2) {
/* CSS Rules Here */
}
Kindle Fire HD 8.9″
@media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5) {
/* CSS Rules Here */
}
Kindle Fire HD 7″
@media only screen
and (min-device-width: 533px)
and (max-device-width: 853px)
and (-webkit-min-device-pixel-ratio: 1.5) {
/* CSS Rules Here */
}
Kindle Fire
@media only screen
and (min-device-width: 600px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
/* CSS Rules Here */
}
BOOTSTRAP MEDIA QUERY BREAKPOINTS
There isn’t an industry standard for media query breakpoints so using Bootstrap breakpoints is a good starting point because Bootstrap was developed to be mobile first.
It is better practice to deviate away from targeting device specific media queries because of their ever-changing nature. You can always start with Bootstrap’s breakpoints and make adjustments as needed.
Here are Bootstrap’s media queries breakpoints and up-values indicated by min-width and breakpoints and down-values indicated by max-width. Further details can be found on their documentations page.
MEDIA QUERY FOR MOBILE SMARTPHONES
@media only screen
and (min-width: 576px) {
/* CSS Rules Here */
}
@media only screen
and (max-width: 575px) {
/* CSS Rules Here */
}
MEDIA QUERY FOR TABLETS
@media only screen
and (min-width: 768px) {
/* CSS Rules Here */
}
@media only screen
and (max-width: 767px) {
/* CSS Rules Here */
}
MEDIA QUERY FOR LAPTOPS AND DESKTOP
@media only screen
and (min-width: 992px) {
/* CSS Rules Here */
}
@media only screen
and (max-width: 991px) {
/* CSS Rules Here */
}
MEDIA QUERY FOR LARGE SCREENS
@media only screen
and (min-width: 1200px) {
/* CSS Rules Here */
}
@media only screen
and (max-width: 1199px) {
/* CSS Rules Here */
}
SUMMARY
Screen sizes and resolutions for mobile devices are always changing and will continue to change as technology advances. Therefore, it should be noted that media queries generally should be targeted for the browser rather than specific devices.
With that said, device specific media queries can be useful as older devices become obsolete and you need to target the smallest device viewport in use. This will ensure that your website will be compatible for all mobile devices currently being used.
