Media Query Builder
Choose your conditions and get the query in the classic form and in the newer range form. The tool tells you whether it matches this window right now.
Start from a common width
In media queries, em and rem both mean the browser's default text size, which is normally 16 pixels, and not the size set in your page.
About Media Query Builder
Media queries let a stylesheet respond to the screen, the window and the visitor's settings. The syntax is easy to get slightly wrong, with brackets in the wrong place or an "and" missing, and there are now two ways to write width limits. This builder assembles the query from the conditions you choose and shows both forms.
Combine width and height limits with orientation, colour scheme, reduced motion, contrast, hover, pointer type and resolution. Common widths are one click away. The tool also checks the classic query against your current window and tells you whether it matches right now, updating as you resize.
How to use Media Query Builder
- Pick a common width or type your own limits.
- Add any other conditions, such as dark colour scheme or reduced motion.
- Check whether it matches your window now.
- Copy the classic or the range syntax.
Common uses
- Writing breakpoints for a responsive layout
- Adding dark mode styles
- Respecting reduced motion preferences
- Targeting touch screens with a coarse pointer
Frequently asked questions
What is the range syntax?
It is a newer way to write width and height limits with comparison signs, for example (768px <= width <= 1024px). It means the same as min-width and max-width together, and many people find it easier to read.
Why do em and rem behave oddly in queries?
In a media query both mean the browser's default text size, normally 16 pixels, not any size set in your page. Setting a query in em therefore keeps its meaning even if you change the font size in your stylesheet.
What is the difference between hover and pointer?
Hover says whether the main input can hover over elements, which a mouse can and a finger cannot. Pointer says how precise the main input is: fine for a mouse or pen, coarse for a finger.
What is a dppx?
It is a dot per pixel unit that measures screen density. A value of 2 matches high-density displays that use two device dots for each CSS pixel.