Media queries for differentiating mouse and touch-based screens

queries.css

@media (hover: none) and (pointer: coarse) {
  /* Touchscreens */
}
@media (hover: none) and (pointer: fine) {
  /* Stylus */
}
@media (hover: hover) and (pointer: coarse) {
  /* Controllers */
}
@media (hover: hover) and (pointer: fine) {
  /* Mouse or touchpad */
}

/* Detailed explanation: */

/* The primary input mechanism of the device includes a 
   pointing device of limited accuracy. */
@media (pointer: coarse) { ... }

/* The primary input mechanism of the device 
includes an accurate pointing device. */
@media (pointer: fine) { ... }

/* The primary input mechanism of the 
   device does not include a pointing device. */
@media (pointer: none) { ... }

/* Primary input mechanism system can 
   hover over elements with ease */
@media (hover: hover) { ... }

/* Primary input mechanism cannot hover 
   at all or cannot conveniently hover 
   (e.g., many mobile devices emulate hovering
   when the user performs an inconvenient long tap), 
   or there is no primary pointing input mechanism */
@media (hover: none) { ... }

/* One or more available input mechanism(s) 
   can hover over elements with ease */
@media (any-hover: hover) { ... }

/* One or more available input mechanism(s) cannot 
   hover (or there are no pointing input mechanisms) */
@media (any-hover: none) { ... }