Frontend Development › CSS

Media Query

Applying styles based on screen size or user preferences.

Also known as: media queries, @media, CSS media query, breakpoints

A media query applies CSS rules only when a condition is true, usually about the screen or the user’s preferences. They are the basic tool of responsive design.

.sidebar { display: none; }

@media (min-width: 768px) {
  .sidebar { display: block; }       /* only on screens at least 768px wide */
}

Common conditions

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

Mobile-first

Write the base styles for small screens, then add min-width queries for bigger ones (mobile-first). The code stays simpler, and phones don’t need to undo desktop styles.

.grid { display: grid; gap: 1rem; }                       /* one column */
@media (min-width: 700px) { .grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .grid { grid-template-columns: repeat(3, 1fr); } }

Tips

• Pages need <meta name="viewport" content="width=device-width, initial-scale=1"> for these queries to behave on phones (viewport meta).
• Choose breakpoints where your content breaks, not at specific device sizes. Devices vary too much.
• Prefer flexible layouts (flexbox, grid with auto-fill) so you need fewer queries.
• Media queries respond to the viewport. For components that should respond to their container, see container queries.
• Use relative units (em or rem) in queries if you want them to follow the user’s font size.