Media Queries: How to Target Desktop, Tablet, and Mobile

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

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.

@media queries for responsive design (mobile/tablet/desktop)

The problem with your code not displaying correctly is that you've literally inverted the display 100% incorrectly from what it should be:

/**Desktop Query*/
@media only screen and (min-width: 768px) {
  .desktop {
    display: block;
  }
  .mobile, .tablet {
    display: none;
  }
}

/*Tablet Query*/
@media only screen and (min-width: 481px) and (max-width:768px) {
  .tablet {
    display: block;
  }
  .mobile, .desktop {
    display: none;
  }
}

/*Mobile Query*/
@media only screen and (max-width:480px) {
  .mobile {
    display: block;
  }
  .desktop, .tablet {
    display: none;
  }
}

Note that I've also moved the tablet query to above the mobile query, as media queries will execute sequentially from top to bottom, which would explain why you were having strange results before.

Hope this helps! :)

desktop media query affects the mobile view

The media query needs to encapsulate the rules that it applies to, not the other way around.

@media screen only and (min-width: 50em) {
    .split {
        display: flex;
    }
}

Mobile and Desktop media query priority

You can write anywhere but if you are a beginner then I suggest you create a separate file for responsive CSS so that you will not confused.
SO in the style.css desktop approach and in responsive.css all media queries for mobile and tablet.
Standered Media queries:

@media screen and (min-width: 1200px){} /* Desktop */
@media screen and (min-width: 1025px) and (max-width: 1199px){} /* small laptop */
@media screen and (min-width: 768px) and (max-width: 1024px){} /* tablet */
@media screen and (min-width: 575px) and (max-width: 767.98px){} /* tablet and large mobiles */
@media screen and (min-width: 320px) and (max-width: 480px){} /* Mobile*/

Thanks

Specific media queries for target mobile (first), tablet & desktop

Use Modernizr (http://modernizr.com/download/) to detect touch device. Modernizr will add .touch or .no-touch class to your html tag. So, for desktop, you will use .touch class to target desktop.

@media only screen and (min-width: 960px) {
    .touch .container { width: 960px; }
}

---

Related Topics