Media Query Builder
100% PrivateWebsite & Webmaster ToolsAssemble responsive CSS media query snippets from common device breakpoint presets.
Runs entirely in your browser. Your input is not uploaded to Ovatly or anywhere else.
- 1Optionally choose a device preset to fill in typical widths.
- 2Adjust min and max width or height in pixels; leave a field empty for no limit.
- 3Choose the media type and, if needed, an orientation.
- 4Copy the @media block and replace the placeholder comment with your CSS.
Media type screen with a maximum width of 767px produces: @media screen and (max-width: 767px) { /* your CSS here */ }
- Preset widths are widely used conventions gathered from common device sizes, not official standards; your own analytics may justify different breakpoints.
- The builder validates the obvious mistakes, such as a minimum width larger than the maximum.
- Conditions are combined with 'and', so all of them must be true for the block to apply.
Designers increasingly set breakpoints where the layout itself breaks, not at device widths. The presets are a practical starting point; the custom fields let you encode your layout's real breakpoints.
About this tool
The Media Query Builder assembles responsive breakpoint snippets: start from a common device preset or enter exact pixel widths and heights, add an orientation condition, and get a complete @media block ready to paste into a stylesheet. Presets are labeled as the conventions they are, because no standards body defines phone or tablet widths.
Related tools
Part of Ovatly's free tools in Website & Webmaster Tools.