44

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?

Viira
  • 3,805
  • 3
  • 16
  • 39
Nishantha
  • 6,065
  • 6
  • 33
  • 51
  • 1
    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. – David Storey May 23 '13 at 07:09
  • 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](http://stackoverflow.com/a/11275644/2408913). Is there any suggestion at least what are main widths we must focus on? thanks.. – Nishantha May 23 '13 at 07:34
  • 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. – David Storey May 23 '13 at 17:14
  • Media Queries for Standard Devices http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ – Dmytro Dzyubak Jul 01 '14 at 12:50

5 Answers5

79

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.

Community
  • 1
  • 1
Nishantha
  • 6,065
  • 6
  • 33
  • 51
  • 7
    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. – brennanyoung Aug 22 '13 at 08:11
17

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.

Terri Swiatek
  • 489
  • 2
  • 11
  • 21
  • 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! – Nishantha Feb 08 '14 at 16:53
  • 6
    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. – rinogo Jun 04 '14 at 17:48
5

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 */
}
Mo.
  • 26,306
  • 36
  • 159
  • 225
1

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) {}
Amaresh Tiwari
  • 947
  • 13
  • 36
0

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) {}
Shammi Singh
  • 369
  • 1
  • 4