Blog Post

Targeting by Mouse Type

Coarse pointer media query lets you differentiate between a coarse pointer (touch screens and similar) and a fine pointer (mouse, pen/tablet etc). It’s a really simple way to provide fallbacks for hover animations and other things that don’t work on touch screens.

@media (pointer: fine) { /* Mouse */ }
@media (pointer: coarse) { /* touchscreen */ }