min-width applies its styles when the viewport is at least that wide, and max-width applies them when the viewport is at most that wide. Both include the value itself.
/* Mobile first */
@media (min-width: 768px) { /* Tablet and up */ }
/* Desktop first */
@media (max-width: 767px) { /* Mobile only */ }
The choice sets the direction you build in. With mobile first, the base styles target small screens and min-width queries add layout as the screen grows. With desktop first, the base styles target large screens and max-width queries undo or simplify them as it shrinks.
Mobile first is generally preferred, partly for performance, because phones never apply the rules inside the wider blocks. It also keeps the base styles simple, since small screens start from a single column with nothing to override. Desktop first piles up overrides, because each smaller breakpoint undoes the one above it.
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
The diagram below the answer is the concept . Jump to it ↓