Media query

A media query is a CSS mechanism that lets you apply style rules conditionally — only when the device or browser window meets certain criteria. Thanks to media queries, the same HTML page can look different on a phone, a tablet and a monitor without maintaining separate versions of the code. It is a fundamental building block of responsive web design.

How a media query works

A media query consists of a media type (most often screen) and one or more conditions testing device features such as min-width, max-width, orientation, pixel density or preferred color scheme (prefers-color-scheme). It is written with the @media rule, followed by a block of styles that activate only when the condition is met. The threshold values at which the layout changes are called breakpoints. The viewport plays a central role here — its width is what media queries most often test.

Practical application

Media queries are used to build flexible layouts: on a wide screen the page shows content in multiple columns with a sidebar, while below a chosen breakpoint it collapses the menu into a hamburger and stacks elements vertically. They also let you hide or enlarge touch targets, adjust typography and support dark mode.

The modern approach favors a mobile-first mindset: base styles are written for the smallest screens, and media queries with a min-width condition progressively enhance the layout on larger devices. Because Google indexes pages based on their mobile version, correctly configured media queries matter not only for user experience but also for SEO. CSS frameworks such as Bootstrap and Tailwind build their grid systems on predefined media query breakpoints.