RWD Media Queries

RWD Media Queries

Media queries apply CSS only when conditions match. Most responsive sites use viewport width breakpoints to adapt layout.

Mobile-first Breakpoints

Mobile-first means: write default styles for small screens, then add min-width rules for larger screens.

.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 992px) {
  .layout {
    grid-template-columns: 280px 1fr;
  }
}

Common Breakpoint Set

• 576px (small)
• 768px (tablet)
• 992px (laptop)
• 1200px (large)

Summary

• Use media queries to adapt your layout at breakpoints.
• Prefer mobile-first min-width rules for scalability.
• Keep breakpoints based on design needs, not specific devices.