Breakpoints in Drupal are defined in a themename.breakpoints.yml file. They specify viewport widths where your design changes, such as mobile, tablet, and desktop.
These breakpoints are used by the responsive image module and can be referenced by Views and other modules to adapt content delivery to screen size.
A typical breakpoints file might define mobile at zero, tablet at 768 pixels, and desktop at 1024 pixels. Each breakpoint gets a media query string and optional multiplier for high resolution displays. Breakpoints make responsive images possible by telling Drupal which image style to serve at each viewport. For the CSS side of responsive design, you still write your own media queries in stylesheets. The breakpoints YAML file mostly serves the image system.