All about Media Breakpoints

What is a media breakpoint?

Media breakpoints explained: A breakpoint is a viewport width where a webpage's styling and look changes to fit the width. You can think of it as a preset view to see how other users may see your website.
Why use breakpoints?: Responsive web design is the the concept of having the look and feel of a website change based on several factors. Essentially, try to make the website look as good as possible with the way the user is experiences the website. To help solve this issue, breakpoints are a tool to help see these issues for yourself on your device.

Device-based: Uses the standarized screen sizes for different devices, phones, tablets, etc.
Content-based: The width where layout and content of a website may break visually.
Layout: Changes to the structure of elements, like grids.
Component: Single components are adjusted without effecting the whole layout.
Orientation: Portrait and landscape modes
Interaction-based: Based on user input, this can in many forms like zooming or hover.

Common Breakpoints: There are prebuilt breakpoints to use: 320px, 480px, 768px, 1024px, and 1200px. These are the standard and most common screen sizes and how most users will experience your website.
How to choose: While it is best to just design a good looking website for all screen sizes, you should only focus on the most common screen sizes, meaning that you'll need to understand the target demographic and what devices they frequently use.
Examples: Take a website targeting other programmers, this website is to help other programmers understand programming languages. As such, it's best to focus on larger screen sizes for desktops and laptops, programmers don't typically code on a phone.