Apply rules only when a condition is true.
CSS
/* Mobile-first: write the small-screen styles normally... */
.container { padding: 10px; }
.menu { display: none; }
/* ...then enhance for larger screens */
@media (min-width: 768px) {
.container { padding: 30px; }
.menu { display: flex; }
}
@media (min-width: 1200px) {
.container { max-width: 1140px; margin: auto; }
}
/* Other conditions */
@media (max-width: 600px) { .sidebar { display: none; } }
@media (orientation: landscape) { /* ... */ }
@media print { nav, footer { display: none; } }
@media (prefers-color-scheme: dark) { body { background: #111; color: #eee; } }The .container padding grows on wider screens. The .menu bar appears only when this result is at least 768px wide.
Make the browser window narrower or wider to see the rules switch.
Common breakpoints: about 576px (phones), 768px (tablets), 992px (small laptops), 1200px (desktops). Choose breakpoints where your content starts to look bad rather than by device names.