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

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.