← Back to at-rules

CSS At-rule

@media

Responsive

Applies styles conditionally based on device characteristics like screen width, resolution, or orientation.

Syntax

@media (condition) { }

Example

@media (max-width: 768px) { body { font-size: 14px; } }

Common use cases

  • Responsive layouts for mobile and desktop
  • Dark mode with prefers-color-scheme
  • Print-specific styles

Practical developer insight

Mobile-first means writing base styles for small screens and using @media (min-width) to add styles for larger screens — not the other way around.

Related

@container@supports@import