Pick a breakpoint for mobile, tablet or desktop, choose min-width, max-width or orientation, and copy a ready-to-paste CSS @media block.
🔒 Everything is generated locally in your browser and never uploaded.
Choose a device preset or enter a custom pixel width, then pick min-width, max-width or a combined range. Add an orientation condition when you need to target landscape or portrait layouts specifically. Edit the CSS rule body on the right so the generated block matches your real component, then copy the finished @media query straight into your stylesheet.
Default to min-width breakpoints so base styles apply everywhere and enhancements layer on for larger screens.
Chain a width range with orientation using the CSS and keyword, generated automatically for you.
See your sample element resize inside a simulated viewport as you adjust the breakpoint.
A media query is a CSS conditional block, written with @media, that applies styles only when the browser viewport matches given conditions such as a minimum or maximum width.
Most modern responsive design uses a mobile-first approach with min-width breakpoints, adding styles as the viewport grows. Max-width is useful when you are overriding desktop-first styles for smaller screens.
Common defaults are around 480px for large phones, 768px for tablets, 1024px for small laptops and 1280px for desktops, though exact values should match your actual design.
Yes. This generator can combine a width condition with landscape or portrait orientation using the CSS 'and' keyword.
No. Everything is generated locally in your browser and nothing is uploaded or saved on a server.