Generate CSS media queries for any breakpoint or device. Choose standard breakpoints or enter a custom width — copy the query block in one click.
Select a standard device breakpoint (mobile, tablet, desktop) or enter a custom min/max width in pixels.
Choose screen, print or all as the media type. Add additional features like orientation if needed.
Click Copy to copy the complete @media query block with a placeholder CSS rule inside.
A CSS media query applies styles conditionally based on characteristics of the device or browser window — most commonly the viewport width. It is the foundation of responsive web design.
min-width applies styles when the viewport is wider than the given value (mobile-first approach). max-width applies styles when the viewport is narrower (desktop-first approach). Mobile-first is the recommended modern practice.
Common breakpoints include 576px (small mobile), 768px (tablet portrait), 992px (tablet landscape/small desktop), 1200px (desktop) and 1400px (large desktop). These align with popular frameworks like Bootstrap and Tailwind.
screen targets devices with screens (monitors, phones, tablets). Other media types include print (for printers), speech (for screen readers) and all (matches all devices). screen is the most commonly used type for styling.
Yes. Use and to combine conditions (e.g. @media screen and (min-width: 768px) and (max-width: 1200px)) and , (comma) to apply the same styles to multiple distinct queries.
orientation: landscape applies when the device width is greater than its height. orientation: portrait applies when height is greater than width. Useful for adjusting layouts on mobile devices when rotated.
Mobile-first means writing base styles for small screens and using min-width media queries to progressively add styles for larger screens. It results in leaner CSS for mobile devices and is considered best practice.
Yes. Use @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) to target high-resolution (HiDPI/Retina) displays. This is commonly used to serve higher-resolution images to retina screens.
prefers-color-scheme: dark detects whether the user has requested a dark colour scheme in their OS settings. It is used to implement automatic dark mode in CSS without JavaScript.
Yes. You can redefine CSS custom property values inside a media query block, which will update any styles that use those variables. This is an efficient way to create responsive design tokens.
