Media query

A media query is a CSS feature that applies a set of styles only when the browsing environment matches certain conditions, most often the width of the screen. It is the core mechanism behind responsive design: the same HTML looks right on a phone, a tablet and a desktop because different rules apply at different sizes.

How a media query works

A media query wraps CSS rules in a condition introduced by @media. When the condition is true, the styles inside apply; when it is false, they are ignored.

• @media (min-width: 768px) { ... } applies from 768px and up.
• @media (max-width: 767px) { ... } applies up to 767px.
• Conditions combine with and, commas (meaning or) and not.

What you can target

Width is the most common feature, but a media query can respond to much more.

• orientation: portrait or landscape.
• min-resolution: high-density (retina) screens.
• prefers-color-scheme: light or dark mode.
• prefers-reduced-motion: users who want less animation.
• print: dedicated styles for the printed page.

Common breakpoints

Most teams define a small, standard set rather than one per device.

Mobile-first versus desktop-first

Mobile-first writes the base styles for small screens, then adds complexity with min-width queries. Desktop-first starts wide and scales down with max-width. Mobile-first tends to produce lighter CSS and matches how Google crawls the mobile version first.

Media queries, SEO and modern CSS

Because Google uses mobile-first indexing, a solid responsive setup built on media queries directly supports SEO and Core Web Vitals. Newer CSS adds container queries, which respond to a parent element's size rather than the viewport and are handy for reusable components, but media queries remain the backbone of page-level responsiveness.

Media queries at BeBranded

At BeBranded we build responsive layouts where breakpoints follow the content, not arbitrary device sizes, so a site stays clean and fast on every screen. It is part of how our design work keeps interfaces consistent from mobile to desktop.