CSS Responsive

RWD Media Queries

Media queries are the switch that makes responsive design possible. A media query applies a block of CSS only when the screen meets a condition — usually a width range. The widths you choose to change your layout at are called breakpoints.

What is a Media Query?

A media query wraps CSS rules in a condition. The most common condition is the viewport width. When the condition is true, the rules inside apply; when false, they are ignored. This lets one stylesheet present different layouts on different devices.

Basic media query syntax

/* Applies only when the viewport is 600px wide or less */
@media (max-width: 600px) {
  body { background: #fef3c7; }
}

min-width vs max-width

min-width applies styles from a width upward (mobile-first). max-width applies styles up to a width (desktop-first). Mixing them lets you target a specific range.

Query	Applies when	Approach
@media (min-width: 768px)	Viewport is 768px or wider	Mobile-first (recommended)
@media (max-width: 767px)	Viewport is 767px or narrower	Desktop-first
(min-width: 600px) and (max-width: 900px)	Between 600 and 900px	Target a range
@media (orientation: landscape)	Screen is wider than tall	Orientation-based

Common Breakpoints

There is no universal set of breakpoints, but these ranges are widely used as starting points. Choose breakpoints where your content starts to look cramped, not for specific device models.

Device class	Typical width	Example breakpoint
Phones	up to ~600px	max-width: 600px
Tablets	~600 to 900px	min-width: 600px
Laptops	~900 to 1200px	min-width: 900px
Large screens	1200px and up	min-width: 1200px

A Runnable Breakpoint Demo

In the example the layout is a single column by default (mobile-first) and becomes a three-column row once the viewport reaches 600px. Drag the result pane wider and narrower to watch it switch at the breakpoint.

One column on mobile, three on wider screens

Example

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: sans-serif; margin: 0; }
  .stack {
    display: grid;
    grid-template-columns: 1fr;   /* mobile: single column */
    gap: 12px;
    padding: 12px;
    background: #f1f5f9;
  }
  .box {
    background: #6366f1; color: #fff; padding: 26px;
    border-radius: 8px; text-align: center; font-weight: 700;
  }
  .box:nth-child(2) { background: #ec4899; }
  .box:nth-child(3) { background: #14b8a6; }

  /* From 600px up, switch to three columns */
  @media (min-width: 600px) {
    .stack { grid-template-columns: repeat(3, 1fr); }
  }
</style>
</head>
<body>
  <div class="stack">
    <div class="box">One</div>
    <div class="box">Two</div>
    <div class="box">Three</div>
  </div>
</body>
</html>

💡

Write your base CSS for the smallest screen, then add min-width queries to progressively enhance. Mobile-first CSS tends to be shorter and loads the least on the most constrained devices.

⚠️

Do not chase exact device dimensions — new devices appear constantly. Set breakpoints where your own design breaks, so your layout stays robust across every screen.

Key Points

A media query applies CSS only when a condition (usually width) is met.
min-width builds up from small screens (mobile-first); max-width scales down.
Combine min-width and max-width to target a specific range.
Choose breakpoints based on your content, not on specific devices.
Mobile-first with min-width queries keeps CSS lean and performant.