CSS 40 💻 pointer and resolution media features

a - pointer media feature
pointer media feature allows you to query the capabilities of the pointing device
Such devices are a mouse, a touchpad or a touchscreen
values: none → it does not support a pointing device
coarse → supports a pointing device of limited accuracy (finger on touchscreen)
fine → supports an accurate pointing device(mouse etc)
@media (pointer: fine) { } → applies styles when there is an accurate pointing device
@media (pointer: coarse) { } → applies styles when there is a pointing device with limited accuracy

b - resolution media feature
resolution media feature allows you to query the output pixel density of the screen
This can be specified using dots per inch (dpi) and pixels per inch (ppi)
you can also use min-resolution and max-resolution
@media (resolution: 150dpi) { } → applies styles with exact 150dpi
@media (max-resolution: 72dpi) { } → applies styles for low resolution screens (e.g., older laptops or mobile devices)
@media (min-resolution: 72dpi) { } → applies styles for high resolution screens (e.g., modern laptops, tablets, and smartphones)

---

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!