CSS breakpoints and media query breakpoints are used to create responsive designs that adapt to different viewport sizes. Breakpoints are the steps where a website's layout snaps to match a new viewport size, and they're used to reflow content, conditionally reveal UI elements, and adapt to alternative rendering modes. Most sites use several key breakpoints to switch between major layouts, which are normally correlated with mobile, tablet, and desktop device families. The Bootstrap framework uses breakpoints such as 576px, 768px, 992px, and 1200px, while the Semantic UI framework adopts larger layouts earlier than either Bootstrap or Tailwind. To add a breakpoint to your CSS styles using media queries, you can use conditions like viewport width, orientation, aspect ratio, and user's preferred color scheme. You can also nest styles within media queries and adjust their specificity by positioning them after default styles or using more specific selectors. However, browser compatibility issues may arise when using newer components like advanced level 4 selectors, so thorough testing is recommended to ensure consistent behavior in all major browsers. Additionally, overlapping breakpoint ranges can cause buggy styling, so it's essential to use a consistent approach across all site's breakpoint ranges. When working with media query conditions, using px units creates the most predictable results, and em and rem units can behave differently due to their relative nature. By mastering CSS breakpoints and media queries, you can create adaptive websites that provide a comfortable browsing experience for visitors from any device.