CSS Media Queries for Desktop, Tablet, Mobile.

media-query.css

/*****************************************
*                                        *
*         Generic Media queries          *
*                                        *
******************************************/

@media (hover: none) {
  /*
  Device = Devices of which the primary input device cannot hover:
         = touchscreens!
  */
}

@media (hover: hover) {
  /*
  Device = Devices of which the primary input device can hover:
              * Mouse
              * Trackpad
         = Desktops and laptops
  */
}

@media (max-width: 50rem) {
  /*
  Device = Devices of which the viewport is less than 50rem:
            If the size of 1rem was not modified
            (by setting a font-size in html tag),
            then 50rem will be 800px (= 50 * 16px)
  */
}
  

@media (orientation: portrait) {
  /*
  Device = Everything in portrait mode:
            * phones
            * tablets
            * computers with browser in portrait mode
  */
}


@media (orientation: portrait) and (min-resolution: 200dpi) {
  /*
  Device = Everything in portrait mode with a high resolution;
           mostly high-end phones and tablets
  */
}


@media (orientation: portrait) and (max-device-width: 420px) {
  /*
  Device = Phones in portrait mode
  
  NOTE:
  1) 'max-device-width' is not the same as 'max-width':
      * 'max-width' =  width of the browser / viewport
      * 'max-device-width' = width of the device's actual screen
    So while using 'max-device-width', resizing the browser window on your desktop
    will NOT result in style changes. Using 'max-width', resizing the desktop viewport
    WILL result in style changes.
  2) Device pixels aren't the same as CSS pixels:
    The actual CSS pixels are determined by the 'Device Pixel Ratio';
    CSS pixels = Logical resolution
               = Physical resolution / Device Pixel Ratio
    e.g. Samsung Galaxy S4
        Physical Resolution:  1080 x 1920
        Device Pixel Ratio: 3
        Logical Resolution: 1080/3 x 1920/3 = 360 x 640
         (Meaning the CSS width is 360px, which is smaller than the 480px we specified
         in our 'max-device-width' media query, so this media query will apply to the Galaxy S4)
  */
}

@media (orientation: landscape) and (max-device-width: 820px) {
  /*
  Device = Phones in landscape mode
  */
}

@media (orientation: portrait) and (max-device-width: 420px),
       (orientation: landscape) and (max-device-width: 820px) {
  /*
  Device = Phones in either of portrait or landscape mode
  */
}

/*
The aspect-ratio feature represents the width-to-height ratio of the viewport;
you can also use the prefixed min-aspect-ratio and max-aspect-ratio variants
to query minimum and maximum values, respectively.
*/
@media (max-aspect-ratio: 3/2) {
  /*
    Any viewport with a width smaller than 3/2 of the height.
    E.g. all portrait aspect ratios; mobile, tablet as well as resized desktop browsers.
  */
}

@media (min-aspect-ratio: 3/2) {
  /*
    Any viewport with a width larger than 3/2 of the height.
    E.g. most fullscreen desktop browsers, as well as landscape mobile and tablet.
  */
}

/************************************************
*                                               *
*        Device-specific Media queries          *
*                                               *
*************************************************/

@media (min-width: 1281px) { 
  /* 
  Device = Desktops
  Screen = 1281px to higher resolution desktops
  */
}


@media (min-width: 1025px) and (max-width: 1280px) {
  /* 
  Device = Laptops, Desktops
  Screen = 1025px to 1280px
  */ 
}


@media (min-width: 768px) and (max-width: 1024px) {
  /* 
    Device = Tablets, Ipads (portrait)
    Screen = 768px to 1024px
  */
}


@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  /* 
    Device = Tablets, Ipads (landscape)
    Screen = 768px to 1024px
  */
}


@media (min-width: 481px) and (max-width: 767px) {
  /* 
    Device = Low Resolution Tablets, Mobiles (Landscape)
    Screen = 481px to 767px
  */
}


@media (min-width: 320px) and (max-width: 480px) {
  /* 
    Device = Most of the Smartphones Mobiles (Portrait)
    Screen = 320px to 479px
  */
}