Media query is a CSS rule that applies styles when a browser, device, or user preference meets defined conditions. It helps a website or web app adapt its presentation for different screen sizes, print output, interaction methods, and accessibility preferences. Rather than identifying a specific device, modern media queries respond to the capabilities and needs of the current browsing environment.
Media Query
What Is a Media Query in CSS?
A media query is a CSS rule that applies styles only when the browsing environment meets a stated condition. It lets a website or web app change its presentation for screen size, printing, color preference, motion preference, or input method, without changing its data or business logic. The CSS @media rule evaluates features of the current environment rather than trying to identify a named device.
How Media Queries Work
Media queries add conditional styling on top of a flexible base layout.
- Create default styles that work well on a small or narrow screen.
- Write an
@mediacondition, such as@media (min-width: 48rem) {.nav { display: flex; } }. - When the viewport reaches 48rem or wider, the matching rules become active.
- Let the CSS cascade resolve which matching rule takes priority.
min-widthadds styles as space grows, whilemax-widthlimits styles below a threshold.
Common Media Query Conditions
Useful conditions describe space, user settings, and interaction capabilities.
| Condition | Practical use |
|---|---|
| width | Change a page layout when content no longer fits comfortably. |
| orientation | Adjust a compact view in landscape or portrait. |
| prefers-color-scheme | Offer a light or dark color theme. |
| prefers-reduced-motion | Reduce nonessential animation for people who request it. |
| hover or pointer | Avoid hover-only controls and adapt targets for touch input. |
| Hide navigation and format pages for printing. |
Benefits of Media Queries
They support responsive design while keeping presentation rules in CSS.
- Improve readability as available space changes.
- Make navigation and controls easier to use on touch screens.
- Support accessible motion and color preferences.
- Create print-friendly versions from the same codebase.
- Use CSS breakpoints where a layout needs adjustment.
Practical Limits of Media Queries
Media queries are valuable, but they are not a complete layout strategy.
- Too many breakpoints can make CSS fragile and hard to maintain.
- Viewport width does not reveal the space available to an individual component.
- They cannot replace semantic HTML, flexible grids, or real-device testing.
- Less common features need progressive enhancement for older browsers.
Media Queries vs. Container Queries
These tools answer different questions about available space.
| Tool | Best use |
|---|---|
| Media query | Page-wide conditions, such as viewport size, print mode, and user preferences. |
| Container query | Reusable components that must adapt to the size of their parent container. |
Best Practices for Responsive and Accessible CSS
Choose conditions based on content and people, not device labels.
- Start mobile-first and add layout changes only when content fails.
- Use flexible sizing, wrapping, and grids before adding a breakpoint.
- Respect reduced-motion and color-scheme preferences.
- Test keyboard access, browser zoom, and intermediate widths.
Using Media Queries in Emergent Projects
When building with an AI app builder or AI website builder, describe expected responsive behavior, touch interactions, and accessibility preferences in the requirements. Emergent can help create full-stack interfaces, but teams should still review generated screens across sizes and interaction modes as part of app design and development. Build responsive AI apps with Emergent.
Start Building
on Emergent today
on Emergent today
Start Building
