Okuzeka
Web Development vocabulary · CSS and Layout

Breakpoint

Meaning in web development, with examples

/ˈbreɪkpɔɪnt/nounCommon term

In web development, breakpoint means: A screen width at which a responsive layout changes, for example from one column on phones to three columns on desktops.

In Turkish: kırılım noktası, breakpoint

How it is used

Defined with media queries, often at widths such as 640, 768 or 1024 pixels, though many teams place breakpoints where their content needs them. Designers and developers agree on a shared set of breakpoints.

Example sentences

  1. At the tablet breakpoint the menu turns into a hamburger icon.

  2. We only have three breakpoints: mobile, tablet and desktop.

Common collocations

  • mobile breakpoint
  • add a breakpoint
  • breakpoint system
  • at the desktop breakpoint
  • media queryA CSS rule that applies styles only when a condition is true, such as a minimum screen width, dark mode or printing.
  • responsive designAn approach to building pages so that the same layout adapts to any screen size, from phones and tablets to large monitors.
  • viewportThe visible area of a web page inside the browser window or phone screen, which changes size when the window is resized or the phone is rotated.
  • layoutThe way elements are arranged on a page: where columns, menus, images and text sit and how they move when the screen size changes.

This word in other fields

The same English word can have a different meaning in another field:

More terms: CSS and Layout

Practise with graded reading

Reading at the right level is the fastest way to make new words stick. Pick free English books by level: