Media Queries

Code

/* Mobile-first: base styles target small screens */
body { font-size: 14px; }

@media (min-width: 768px) {
  body { font-size: 16px; }
  .layout { display: grid; grid-template-columns: 1fr 3fr; }
}

@media (min-width: 1200px) {
  .container { max-width: 1140px; }
}

/* Print styles */
@media print {
  .nav, .ads { display: none; }
  body { color: black; }
}

/* Dark scheme via preference */
@media (prefers-color-scheme: dark) {
  body { background: #121212; color: #eee; }
}

/* Orientation and pointer */
@media (orientation: landscape) { padding: 0; }
@media (hover: none) { .tip { display: block; } }  /* touch */

Explanation

Media queries apply styles conditionally based on viewport width, media type, or user preferences. Mobile-first design adds styles at min-width breakpoints as the screen grows. prefers-color-scheme and hover adapt the UI to dark mode and touch input without JavaScript.

More CSS3 Snippets