Widths to use in media queries [closed] - css

Question

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
What are the most important media query widths for all devices like desktops, tablets, laptops/Ipads, Iphones and Smartphones?
Are there any standard widths for these devices?

Answer 1

I'm looking everywhere for the best answer for this. Here what I found.
#media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
#media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets # 600 or # 640 wide. */ }
#media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
#media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
#media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
#media (min-width:1281px) { /* hi-res laptops and desktops */ }
I think this is better considering with mobile first approach. Start from mobile style sheet and then apply media queries relevant for other devices. Thanks for #ryanve. Here is the link.

Answer 2

I find these are good breakpoints to start from but always test and tweak as you go. I'd also suggest using ems instead of px for dimensions for varied device dimensions and resolutions (reasons described here (http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/))
So the above queries would look like this:
#media (min-width:20em) { /* smartphones, iPhone, portrait 480x320 phones */ }
#media (min-width:30.063em) { /* portrait e-readers (Nook/Kindle), smaller tablets # 600 or # 640 wide. */ }
#media (min-width:40.063em) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
#media (min-width:60.063em) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
#media (min-width:64.063em) { /* big landscape tablets, laptops, and desktops */ }
#media (min-width:80.063em) { /* hi-res laptops and desktops */ }
There is also a nifty pixel to em calculator online here (http://pxtoem.com/)
For those of you not as familiar, including myself.

Answer 3

Try this including retina
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Answer 4

Try this Media Query it will help you
#media only screen and (min-width:1280px) {}
#media (min-width:1024px) and (max-width:1279px) {}
#media (min-width:768px) and (max-width:1023px) {}
#media (min-width:480px) and (max-width:767px) {}
#media screen and (max-width:479px) {}
#media only screen and (max-width:320px) {}
#media only screen and (max-width:767px) {}

Answer 5

perfect media query
#media (max-width:400px) {}
#media (min-width:401px) and (max-width:599px) {}
#media (min-width:600px) and (max-width:767px) {}
#media (min-width:768px) and (max-width:950px) {}
#media (min-width:951px) and (max-width:1050px) {}
#media (min-width:1051px) {}