Widths to use in media queries [closed]

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?

Aeolis

Not really. It depends on your content. Does your site look good at a certain resolution? No need to add a media query there. Does making it smaller (or bigger) break something or make it sub-optimal? Add a breakpoint for that width. You should think content first, rather than device first. – Milanmilanese

dstorey thanks for your reply. Yes you are correct "You should think content first, rather than device first". But here I found on Stackoverflow what @doubleJ thinks link. Is there any suggestion at least what are main widths we must focus on? thanks.. – Aeolis

I think those are overly restrictive and add redundancy or complexity, and they even miss devices smaller than 320 that are still popular in developing countries. If you have any sort of liquid layout most of those would need no extra CSS rules anyway. – Milanmilanese

Media Queries for Standard Devices css-tricks.com/snippets/css/media-queries-for-standard-devices – Carnatic

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.

Aeolis

I know the question is about best widths (and this set is as good as any), but hi-res displays are defined not by the widths but by their resolution (device-pixel-ratio). There are mediaqueries for that too. – Zirconia

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.

Cindy

Thanx @Terri for your info, I have never tried responsive design with em. It is worth try this if having those advantages with em instead of px. em is not familiar but all you want to do is to convert px to em. That's great! – Aeolis

This is a well-intentioned but somewhat incomplete answer. em measurements are wholly dependent on the font size currently in use. (If the font size of the element in question is 200px, then 1em=200px) Since this is not consistent across all websites' styles, the em values provided in this answer are only examples and may not work well with your code. – Clueless

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 */
}

Inanity

This is a great working template for any and all media queries. Thanks! – Ermines

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) {}

Octogenarian

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) {}

Labium