Suggest an editImprove this articleRefine the answer for “What is a breakpoint in responsive design?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**A breakpoint** is a control screen width at which the layout starts to change its behavior via media queries; essentially, a "turning point" where the interface rearranges itself for a new device. **Key point:** a breakpoint is a point where the layout changes, used together with media queries for a responsive interface.Shown above the full answer for quick recall.Answer (EN)ImageA breakpoint is **a control screen width** at which the layout starts to change its behavior via media queries. Essentially, it is a "turning point" where the interface rearranges itself for a new device (mobile, tablet, laptop, desktop). What this looks like in practice: ```css @media (max-width: 768px) { /* styles for devices with a screen ≤ 768px */ } ``` Where `768px` is the breakpoint. **What breakpoints are for:** - rearrange the grid; - change the size of elements; - simplify navigation on mobile; - adapt fonts, spacing, and components. **Typical breakpoints (guidelines):** - `320-480px`: mobile - `768px`: tablets - `1024-1280px`: laptops - `1440px+`: desktops **Summary:** a breakpoint is a point where the layout changes, used together with media queries for a responsive interface.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.