Adjust the sliders below to simulate different viewport sizes and observe which media query conditions match.
A CSS media query is a mechanism introduced in CSS3 that allows developers to apply different style rules based on device characteristics such as screen width, orientation, and resolution. It is a core technology for responsive web design, implemented through the @media rule. Through media queries, a single HTML structure can adapt to various screen sizes ranging from mobile phones to desktop monitors.
Mobile-First: Design for the smallest screens first, then progressively enhance the experience for larger screens using min-width media queries. This is the currently recommended strategy because it ensures mobile devices load the least amount of CSS for better performance.
Desktop-First: Design for full desktop layouts first, then adapt down for smaller screens using max-width media queries. This approach typically results in more code and higher maintenance costs.
min-width / max-width: Viewport width conditionsmin-height / max-height: Viewport height conditionsorientation: Screen orientation (portrait / landscape)aspect-ratio: Aspect ratio of the viewportprefers-color-scheme: User color preference (light / dark)prefers-reduced-motion: Reduced animation preference (no-preference / reduce)hover: Pointer hover capability (hover / none)pointer: Pointer accuracy (fine / coarse / none)resolution: Device resolution (e.g., 2dppx for Retina)This CSS Media Query Generator helps developers quickly build standard @media rules. Here's a detailed step-by-step guide:
Step 1 - Choose Preset Breakpoints: Click the preset buttons at the top (Phone, Tablet, Desktop, Large Screen), and the tool will automatically add the corresponding media query condition. You can also manually add custom conditions using the "Add Condition" button.
Step 2 - Customize Media Features: In the "Custom Media Query Conditions" area, you can add any number of conditions. Each condition consists of a logical operator (and/or/only/not), a media feature (e.g., min-width, orientation), and a value. The tool supports combining multiple conditions to generate complex media queries.
Step 3 - Use Preset Templates: Click the "Preset Templates" buttons to quickly apply common scenarios like Dark Mode, Print Styles, Reduced Motion, and more. Templates automatically configure the best combination of media features and values.
Step 4 - Preview and Export: The generated CSS code is displayed in real-time in the code area. You can click the "Copy Code" button to copy it to your clipboard, or use the "Download CSS" button to save it as a .css file. The live preview area on the right simulates different viewport sizes to help verify media query matching logic.
Responsive Layout Adaptation: The most common use case for media queries in web development is adjusting layouts based on viewport width. For example, using a single-column layout on small screens, a two-column layout on medium screens, and three or more columns on large screens. This tool helps you quickly generate @media code for all breakpoints, avoiding syntax errors from hand-coding.
Automatic Dark Mode Switching: Using the prefers-color-scheme: dark media feature, you can detect whether the user's system has enabled a dark theme and automatically switch your website's color scheme. This is more seamless and intelligent than manual toggle buttons, and is an important way to improve user experience.
Print Style Optimization: Using the @media print rule, you can define specific styles for printed pages. For example, hiding navigation bars and ads, changing the background to white, adjusting font sizes, etc. This ensures your web content looks its best when printed, which is especially important for documents, reports, and invoices.
Logical Combination Syntax: CSS media queries support logical combinations using and, or (comma-separated), not, and only. The and keyword means all conditions must be met; comma-separated queries mean any condition can be met; not negates the entire media query; only hides the media query from older browsers to prevent them from mistakenly applying styles.
Container Queries: In addition to viewport-based media queries, CSS has introduced container queries (@container), which allow applying styles based on the size of an element's container rather than the viewport. This is extremely useful in component-based development, as a component may need different layouts depending on the container it sits in. Container queries require the parent element to set container-type: size or container-type: inline-size.
Specificity and Cascade: CSS rules inside media queries follow the same selector specificity rules as regular CSS. If multiple rules from different media queries match the same element, the rule with higher selector specificity wins. It's recommended to use the same selectors inside and outside media queries to avoid specificity confusion.
The impact is minimal. Modern browsers parse all CSS, but only rules inside matching @media blocks are applied. Unmatched @media rules are ignored, though the CSS file is still downloaded. For performance optimization, consider inlining critical CSS and loading non-critical responsive styles in separate CSS files with the media attribute.
Yes. Use the and keyword to combine multiple features, e.g., @media (min-width: 768px) and (orientation: landscape). Use commas to separate multiple queries for "or" logic, e.g., @media (max-width: 480px), (min-width: 1200px) means small screens OR large screens.
Common reasons include: (1) incorrect @media syntax; (2) insufficient selector specificity being overridden by other rules; (3) browser does not support the media feature; (4) viewport size does not meet the condition. Use your browser's developer tools (F12) to inspect element styles and computed styles to verify whether the @media rule is being applied correctly.
The prefers-reduced-motion media feature detects whether the user prefers reduced animation effects (such as users with motion sensitivity). When the value is "reduce," you should disable or simplify CSS animations and transitions. This is an important part of web accessibility (A11y), showing consideration for all users.
Media queries are based on the entire viewport size, while container queries are based on the size of an element's direct container. Container queries are more suitable for component-based scenarios—for example, a card component might need different layouts in a sidebar versus the main content area. Container queries require the parent element to set container-type.
The CSS media query code generated by this tool follows W3C standards and is supported by all modern browsers (Chrome 49+, Firefox 49+, Safari 9+, Edge 16+). For newer media features (such as prefers-reduced-motion, color-gamut, etc.), use caniuse.com to check specific browser support.