viewport-breakpoints
Viewport Breakpoints
reference ) CSS breakpoints for responsive design - LogRocket
1. Group Devices
- I personally prefer 4 types.
- Small - Medium - Large - Extra Large
2. Pick breakpoints wisely
- criteria 1) break by content
- criteria 2) break by device
- I prefer the latter one.
3. Breakpoints used in popular CSS frameworks
| Breakpoint | Dimensions |
|---|
| X-small | < 576 px |
| small | >= 576 px |
| medium | >= 768 px |
| large | >= 992 px |
| extra large | >= 1200 px |
| 2x large | >= 1400 px |
| Breakpoint keys | Dimensions |
|---|
| (none) | < 640px |
| sm | > 640 px |
| md | >= 768 px |
| lg | >= 1024 px |
| xl | >= 1280 px |
| 2xl | >= 1536 px |