Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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 should the breakpoints be for each device?

like image 558
betamax Avatar asked Jun 16 '11 10:06

betamax


People also ask

How do I use media query on all devices?

A media query consist of a media type that can contain one or more expression which can be either true or false. The result of the query is true if the specified media matches the type of device where the document is displayed on. If the media query is true then the style is applied.

Do media queries work on mobile?

Media Query for Desktop Not Working You may notice that, although your queries work on mobile devices, they don't work on a desktop computer with a reduced browser window.


1 Answers

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 because ems afford better 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 your 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.

like image 145
ryanve Avatar answered Oct 16 '22 17:10

ryanve