Generate responsive CSS media queries for common breakpoints, devices, and screen orientations.
CSS Media Query Generator converts a chosen breakpoint, device preset, or screen orientation into a CSS @media rule ready for declarations. It saves you from manually arranging media-feature names, values, parentheses, and logical conditions. The main source of confusion is that device labels do not identify hardware. The generated rule tests properties such as viewport width and orientation, so any browser viewport satisfying those conditions can match, regardless of the device model that produced it.
A width breakpoint becomes a condition such as min-width or max-width. A minimum-width condition begins matching when the viewport reaches the stated width in CSS pixels, while a maximum-width condition includes widths up to its stated boundary. If lower and upper limits are joined with and, the rule applies only when every listed condition is true.
Selecting an orientation adds either (orientation: portrait) or (orientation: landscape) to the media query. Portrait means the viewport height is at least its width; landscape means the viewport width is greater than its height. When orientation and width appear in one query joined by and, changing either viewport dimension can change whether the enclosed CSS applies.
No. A preset produces media conditions based on dimensions or orientation; it does not establish the manufacturer, model, input hardware, or operating system. A desktop browser window can match a phone-sized query, and a high-resolution phone may expose a CSS viewport unlike its physical pixel dimensions. Use the label as a breakpoint convenience, not device detection.
No. Its output is a media query, which evaluates characteristics of the browsing environment or viewport. Container queries use @container and evaluate an ancestor query container instead. If a component must respond to the space allocated by its parent rather than the viewport, a generated @media rule does not answer that requirement.
The behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.