Developer

Media Query Generator

Responsive CSS breakpoints, copy-ready.

Resize your window — this box turns green when the query is active.
px ↔ em converter
÷

This free media query generator builds responsive CSS@media rules from device presets or your own conditions — media type, only/notlogic, min/max width and height, orientation, dark/light color scheme, aspect ratio and retina resolution — in px, em or rem. A live indicator turns green when the query matches your current window, and a built-in px↔em converter keeps proportional breakpoints exact. Copy the query and drop your styles inside.

Related tools