Media Queries: How to target desktop, tablet and mobile?

    |
  • Added:
  • |
  • In: Wordpress

I have been doing some research on media queries and I still don't quite understand how to target devices of certain sizes.

I want to be able to target desktop, tablet and mobile. I know that there will be some discrepancies but it would be nice to have a generic system that can be used to target these devices.

Some examples I have found:

# Mobile only screen and (min-width: 480px) # Tablet only screen and (min-width: 768px) # Desktop only screen and (min-width: 992px) # Huge only screen and (min-width: 1280px) 

Or:

# Phone only screen and (max-width:320px) # Tablet only screen and (min-width:321px) and (max-width:768px) # Desktop only screen and (min-width:769px) 

What do you think these 'breakpoints' should be for each device?

This Question Has 10 Answeres | Orginal Question | betamax

Since there are many varying screen sizes that always change and most likely will always change the best way to go is to base your breakpoints and mediaqueries on your design.

The easiest way to go about this is to grab your completed desktop design and open it in your web browser. Shrink the screen slowly to make it narrower. Observe to see when the design starts to, "break", or look horrible and cramped. At this point a break point with a media query would be required.

It's common to create three sets of media queries for desktop, tablet and phone. But if your design looks good on all three, why bother with the complexity of adding three different media queries that are not necessary. Do it on an as-needed basis.

Following worked for me. The behavior does not change on desktop. But on tablets and mobile, I expand the nav bar to cover the big logo image. Note, use the margin (top and bottom) as much as you need for your logo height. For my case, 60px top and bottom worked perfectly. Check the nav bar here.

@media (max-width:768px) { .navbar-toggle { margin: 60px 0; } } 
  1. Extra small devices (phones, up to 480px)
  2. Small devices (tablets, 768px and up)
  3. Medium devices (big landscape tablets, laptops, and desktops, 992px and up)
  4. Large devices (large desktops, 1200px and up)
  5. portrait e-readers (Nook/Kindle), smaller tablets - min-width:481px
  6. portrait tablets, portrait iPad, landscape e-readers - min-width:641px
  7. tablet, landscape iPad, lo-res laptops - min-width:961px
  8. HTC One device-width: 360px device-height: 640px -webkit-device-pixel-ratio: 3
  9. Samsung Galaxy S2 device-width: 320px device-height: 534px -webkit-device-pixel-ratio: 1.5 (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5
  10. Samsung Galaxy S3 device-width: 320px device-height: 640px -webkit-device-pixel-ratio: 2 (min--moz-device-pixel-ratio: 2), - Older Firefox browsers (prior to Firefox 16) -
  11. Samsung Galaxy S4 device-width: 320px device-height: 640px -webkit-device-pixel-ratio: 3
  12. LG Nexus 4 device-width: 384px device-height: 592px -webkit-device-pixel-ratio: 2
  13. Asus Nexus 7 device-width: 601px device-height: 906px -webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332)
  14. iPad 1 and 2, iPad Mini device-width: 768px device-height: 1024px -webkit-device-pixel-ratio: 1
  15. iPad 3 and 4 device-width: 768px device-height: 1024px -webkit-device-pixel-ratio: 2)
  16. iPhone 3G device-width: 320px device-height: 480px -webkit-device-pixel-ratio: 1)
  17. iPhone 4 device-width: 320px device-height: 480px -webkit-device-pixel-ratio: 2)
  18. iPhone 5 device-width: 320px device-height: 568px -webkit-device-pixel-ratio: 2)

IMO these are the best breakpoints:

@media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ } @media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */ } @media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ } @media (min-width:801px) { /* 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 */ } 

Edit: Refined to work better with 960 grids:

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

In practice, many designers convert pixels to ems, largely b/c ems better afford zooming. At standard zoom 1em === 16px. Multiply pixels by 1em/16px to get ems. For example, 320px === 20em.

In response to the comment, min-width is standard in "mobile-first" design, wherein you start by designing for your smallest screens, and then add ever-increasing media queries, working you way onto larger and larger screens. Regardless of whether you prefer min-, max-, or combinations thereof, be cognizant of the order of your rules, keeping in mind that if multiple rules match the same element, the later rules will override the earlier rules.

Don't target specific devices or sizes!

The general wisdom is not to target specific devices or sizes, but to reframe the term 'breakpoint':

  • develop the site for mobile first using percentages or ems, not pixels,
  • then try it in a larger viewport and note where it begins to fail,
  • redesign the layout and add a CSS media query just to handle the broken parts,
  • repeat the process until you reach the next breakpoint.

You can use responsivepx.com to find the 'natural' breakpoints, as in 'breakpoints are dead' by Marc Drummond.

Use natural breakpoints

The 'breakpoints' then become the actual point at which your mobile design begins to 'break' i.e. cease to be usable or visually pleasing. Once you have a good working mobile site, without media queries, you can stop being concerned about specific sizes and simply add media queries that handle successively larger viewports.

If you're not trying to pin a design to an exact screen size, this approach works by removing the need to target specific devices. The integrity of the design itself at each breakpoint ensures that it will hold up at any size. In other words, if a menu/content section/whatever stops being usable at a certain size, design a breakpoint for that size, not for a specific device size.

See Lyza Gardner's post on behavioural breakpoints, and also Zeldman's post about Ethan Marcotte and how responsive web design evolved from the intitial idea.

It's not a matter of pixels count, it's a matter of actual size (in mm or inches) of characters on the screen, which depends on pixels density. Hence "min-width:" and "max-width:" are useless. A full explanation of this issue is here: what exactly is device pixel ratio?

"@media" queries take into account the pixels count and the device pixel ratio, resulting in a "virtual resolution" which is what you have to actually take into account while designing your page: if your font is 10px fixed-width and the "virtual horizontal resolution" is 300 px, 30 characters will be needed to fill a line.

If you want to target a device then just write min-device-width. For example:

For iPhone

@media only screen and (min-device-width: 480px){} 

For tablets

@media only screen and (min-device-width: 768px){} 

Here are some good articles:

  1. I have used this site to find the resolution and developed CSS per actual numbers. My numbers vary quite a bit from the above answers, except that the my css actually hits the desired devices.

  2. Also, have this debugging piece of code right after your media query: For example:

    @media only screen and (min-width: 769px) and (max-width: 1281px) { /* 10 inch tablet enter here */ body::before { content: "tablet to some desktop media query (769 > 1281) fired"; font-weight: bold; display: block; text-align: center; background: rgba(255, 255, 0, 0.9); /* Semi-transparent yellow */ position: absolute; top: 0; left: 0; right: 0; z-index: 99; } } 

    Got this in the web, don't remember the exactly site. Add this debugging item in every single media query and you will see what query has being applied.

The best breakpoints recommended by Twitter Bootstrap

/* Custom, iPhone Retina */ @media only screen and (min-width : 320px) { } /* Extra Small Devices, Phones */ @media only screen and (min-width : 480px) { } /* Small Devices, Tablets */ @media only screen and (min-width : 768px) { } /* Medium Devices, Desktops */ @media only screen and (min-width : 992px) { } /* Large Devices, Wide Screens */ @media only screen and (min-width : 1200px) { } 

Media queries for common device breakpoints

/* 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 */ } /********** iPad 3 **********/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) { /* Styles */ } @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) { /* 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 (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) { /* Styles */ } @media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) { /* Styles */ } /* iPhone 5 ----------- */ @media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ /* Styles */ } @media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ /* Styles */ } /* iPhone 6 ----------- */ @media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ /* Styles */ } @media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ /* Styles */ } /* iPhone 6+ ----------- */ @media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ /* Styles */ } @media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ /* Styles */ } /* Samsung Galaxy S3 ----------- */ @media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ /* Styles */ } @media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ /* Styles */ } /* Samsung Galaxy S4 ----------- */ @media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){ /* Styles */ } @media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){ /* Styles */ } /* Samsung Galaxy S5 ----------- */ @media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){ /* Styles */ } @media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){ /* Styles */ } 

Search
I am...

Sajjad Hossain

I have five years of experience in web development sector. I love to do amazing projects and share my knowledge with all.

Connect Social With PHPAns
Top