Conditions for Styles

1. Modern Syntax (Range Syntax)

Forget inconvenient max-width. Now you can write like in math:

/* Instead of @media (max-width: 600px) */
@media (width <= 600px) { ... }

/* Interval: from 600px to 1024px */
@media (600px < width <= 1024px) { ... }

2. Dark Theme and Orientation

@media (prefers-color-scheme: dark) {
  body { background: #1a1a1a; color: white; }
}

@media (orientation: landscape) {
  /* Styles only when phone is turned sideways */
}