Media breakpoints are important to use so that the website you create looks it's best on any device. These breakpoints are where the CSS changes depending on the device width.
It's hard to choose breakpoints because there is no set standard. Mobile devices can vary greatly. Cell phones have a variety of screen sizes, as do tablets. Even laptops can vary quite a bit and some desktop monitors can be quite big.
When choosing how to code the breakpoints, you can choose based on the device or based on the content of the site. When you code based on device size, you may have to go back later and update it when devices change size and new breakpoints are needed. This can be time consuming.
Instead, it's better to make the breakpoints based on the content of the site. This way you can code the site based on how the content will appear at specified breakpoints. This allows your code to keep working, even when devices change. It's not specific to a certain device's size.
To figure out a breakpoint, it's good to consider mobile devices, tablets, and desktop computers separately. There are a variety of sites online that offer suggested sizes to shoot for. You can use these breakpoints as a starting point and adjust as needed depending on your site content.
The Lambda site listed these breakpoints as good suggestions: