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

Question

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, ta

Answer 1

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 break points and media queries 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 looks 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!

Answer 2

One extra feature is you can also use-media queries in the media attribute of the <link> tag.

<link href="style.css" rel="stylesheet">
<link href="justForFrint.css" rel="stylesheet" media="print">
<link href="deviceSizeDepending.css" rel="stylesheet" media="(min-width: 40em)">

With this, the browser will download all CSS resources, regardless of the media attribute. The difference is that if the media-query of the media attribute is evaluated to false then that .css file and his content will not be render-blocking.

Therefore, it is recommended to use the media attribute in the <link> tag since it guarantees a better user experience.

Here you can read a Google article about this issue https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

Some tools that will help you to automate the separation of your css code in different files according to your media-querys

Webpack https://www.npmjs.com/package/media-query-plugin https://www.npmjs.com/package/media-query-splitting-plugin

PostCSS https://www.npmjs.com/package/postcss-extract-media-query

Answer 3

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)

Answer 4

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 e.g:

   @media only screen and (min-width: 769px) and (max-width: 1281px) { 
     /* for 10 inches tablet screens */
     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;
     }
   } 
   

   Add this debugging item in every single media query and you will see what query has being applied.