CSS Breakpoint

A breakpoint is a specific viewport width at which a page's layout or styling changes to suit the available space. In CSS it is implemented with a media query such as @media (min-width: 768px). Between breakpoints, fluid widths and flexible layouts adapt continuously.

Why it matters

Breakpoints are how responsive designs adjust from phones to tablets to desktops. Common widths used by frameworks (for example 576, 768, 992 and 1200 pixels in Bootstrap) are conventions, not rules. Good practice is to add a breakpoint where the content starts to look wrong, not at specific device sizes, because device widths vary widely.

Example

.cards { display: grid; gap: 1rem; grid-template-columns: 1fr; }

@media (min-width: 640px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .cards { grid-template-columns: repeat(4, 1fr); }
}

One column is the default. At 640 pixels it becomes two, and at 1024 pixels four. Using min-width follows a mobile-first approach.

Common mistakes

• Targeting individual devices instead of content needs.
• Mixing min-width and max-width rules, which creates overlaps and confusion.
• Defining too many breakpoints, making the CSS hard to maintain.
• Forgetting the meta viewport tag, so the breakpoints never trigger on phones.

Related

• Media query
• Mobile-first design
• Meta viewport tag
• Responsive design

यह पेज सामान्य जानकारी है, जिसे हमारी संपादकीय टीम ने लिखा है और दस्तावेज़ीकरण बदलने पर अपडेट किया जाता है। सर्वर और प्रदाता अलग-अलग होते हैं, इसलिए बदलाव पहले सुरक्षित तरीके से जाँचें। देखें: संपादकीय नीति और अस्वीकरण.