---
title: "Media query"
description: "A media query is a CSS rule that adapts styles to device properties. Learn media query syntax, breakpoints and their role in responsive web design."
url: "https://nodea.io/en/glossary/media-query"
lang: "en"
updated: "2026-07-13"
---

# Media query

> A media query is a CSS rule that applies styles conditionally, based on device properties such as viewport width, orientation or color scheme. It is the cornerstone of responsive web design.

A **media query** is a [CSS](https://nodea.io/en/glossary/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](https://nodea.io/en/glossary/responsive-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](https://nodea.io/en/glossary/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](https://nodea.io/en/glossary/mobile-first-indexing) 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.

### What is a breakpoint in a media query?

A breakpoint is a specific value — usually a viewport width — at which the page layout switches to a different arrangement, for example from a single column to two columns. A media query with a min-width or max-width condition checks whether the device falls within a given range and only then applies the associated styles.

## Related

- [CSS (Cascading Style Sheets)](https://nodea.io/en/glossary/css)
- [Responsive Design](https://nodea.io/en/glossary/responsive-design)
- [Viewport](https://nodea.io/en/glossary/viewport)
- [Mobile-first indexing](https://nodea.io/en/glossary/mobile-first-indexing)
- [Layout](https://nodea.io/en/glossary/layout)

---

Languages: [pl](https://nodea.pl/pl/slownik-pojec/media-query.md)  
Site index: [llms.txt](https://nodea.io/en/llms.txt)