Back to Dev Tools
Media Query Generator
Common CSS media queries for responsive design
Standard Breakpoints
| Name | Width | Media Query | |
|---|---|---|---|
| Mobile S | 320px | @media (min-width: 320px) | |
| Mobile M | 375px | @media (min-width: 375px) | |
| Mobile L | 425px | @media (min-width: 425px) | |
| Tablet | 768px | @media (min-width: 768px) | |
| Laptop | 1024px | @media (min-width: 1024px) | |
| Laptop L | 1440px | @media (min-width: 1440px) | |
| 4K | 2560px | @media (min-width: 2560px) |
Tailwind CSS Breakpoints
| Name | Width | Media Query | |
|---|---|---|---|
| sm | 640px | @media (min-width: 640px) | |
| md | 768px | @media (min-width: 768px) | |
| lg | 1024px | @media (min-width: 1024px) | |
| xl | 1280px | @media (min-width: 1280px) | |
| 2xl | 1536px | @media (min-width: 1536px) |
Bootstrap Breakpoints
| Name | Width | Media Query | |
|---|---|---|---|
| xs | 0px | @media (min-width: 0px) | |
| sm | 576px | @media (min-width: 576px) | |
| md | 768px | @media (min-width: 768px) | |
| lg | 992px | @media (min-width: 992px) | |
| xl | 1200px | @media (min-width: 1200px) | |
| xxl | 1400px | @media (min-width: 1400px) |