@media (Media Queries)
property
CSS3
Applies CSS rules based on device properties like screen width, height, or orientation.
Syntax
@media (max-width: 768px) { }
Example
css
/* Mobile-first approach */
.container { width: 100%; padding: 0 16px; }
/* Tablet */
@media (min-width: 768px) {
.container { max-width: 720px; margin: 0 auto; }
.grid { grid-template-columns: repeat(2, 1fr); }
}
/* Desktop */
@media (min-width: 1024px) {
.container { max-width: 1200px; }
.grid { grid-template-columns: repeat(3, 1fr); }
}
/* Dark mode */
@media (prefers-color-scheme: dark) {
body { background: #1a1a1a; color: #eee; }
}