CSS Breakpoints are used in responsive web design to change a web page's styling based on the screen size of the device it is being viewed from. They are the "point" at which the web page will adapt to best fit on any given device without adversely affecting the content or presentation of the web page. Breakpoints are triggered by media queries, which tell the page to display a certain way typically based on the number of pixels that fit within the viewport.
There are two primary approaches to selecting which media query breakpoints to use: Device-based breakpoints and Content-based breakpoints.
Device-based breakpoints rely on height and width measurements specific to individual devices. For example, the iPhone 11 has a viewport size of 414 by 896 pixels. A developer can set a specific media query to trigger a breakpoint at this exact resolution so that an iPhone 11 user will have the web page displayed properly. However, this is a tedious way to code media queries, as a developer would need to account for each and every device that may be used to view their web page, which is not only time-consuming but practically impossible, considering the vast array of devices that are used to view web content. A developer can group device display breakpoints by resolution, but it is still recommended to determine breakpoints based on content rather than device.
Content-based breakpoints rely on how the content is displayed at smaller resolutions and setting the breakpoints accordingly. When the content begins to look misaligned, a developer can add a breakpoint and adjust the display at this resolution to fix the alignment and adjust other areas of content (adding, removing, or modifying certain elements) to better fit the smaller screen. This is the preferred method of adding breakpoints, and can be accomplished by setting the media query paramaters using either minimum pixel width or ranges.