which-media-queries

A simple web app to tell which media queries are active for you. Useful for when you're debugging or when you're collaborating with someone non-technical and you need to know their setup.

E.g.

Stakeholder: "Why am I not seeing any animations? Fix it now."

Developer: "I can see from which-media-queries that you seem to have animations disabled. prefers-reduced-motion is showing as reduce."

Stakeholder: Enables animations on local machine.

Stakeholder: "Fixed, thanks for sorting so quickly."

Developer: 😎

Project Setup

pnpm install

Compile and Hot-Reload for Development

pnpm run dev

Compile and Minify for Production

pnpm run build

Run Unit Tests with Vitest

pnpm run test