Back to Free Tools
FREE TOOLS
CSS Media Query Builder
Generate an inclusive CSS viewport-width media query with an optional user-preference condition.
Minimum viewport width (CSS px), Maximum viewport width (CSS px)
css-media-query-builder.json
Browser only
Runs locally in your browser. Your files, pasted content and generated output are not uploaded. Reset clears this tool’s working data.
This tool needs JavaScript. If it does not load, refresh the page and try again.
How to use this tool
- Enter the displayed inputs, using the example values as a starting point. JSON inputs must use the documented shape.
- Choose Calculate result, inspect the complete report and download its JSON file.
- Change inputs and run again, or Reset to restore the examples and clear working output.
Examples
Minimum viewport width (CSS px): 768
Maximum viewport width (CSS px): 1200
Preference condition: any
Limitations
- Widths 0–1,000,000 CSS px with minimum ≤ maximum. Optional dark/light/reduced-motion preference. Generates source text only; no browser feature support claim.
- At most 100,000 UTF-16 units per text field and 400,000 UTF-8 bytes combined input; 4 MiB output and a 30-second local worker. Valid Unicode only. Tool-specific limits may be tighter.
- Decimal engineering calculations use finite JavaScript arithmetic. Structured record operations preserve exact JSON numeric tokens. Reports are local calculations or bounded format inspections, not a claim of external validity.
Related tools
No items found.