I am really confused as to what the Media Query breakpoints should be. The way I am use to doing it is having one pixel less than the next break point, for instance
@media screen and (max-width: 749px) {} //Mobile design CSS applies to everything until 74ppx
@media screen and (min-width: 750px) and (max-width: 969px) {}
etc.
But some people use the exact values such as
@media screen and (max-width: 750px) {}
@media screen and (min-width: 750px) and (max-width: 970px) {}
Wouldn't the second approach break it? My understanding is the first approach is the way to go.
And what about if you do something such as
@media screen and (max-width: 750px) {}
@media screen and (max-width: 970px) {}
And I want all the mobile designs to apply to 750, but at 750 is where the tablet view starts. Same for 970. In this case would having it also one pixel less be correct? I.e max-width: 749 and max-width: 969
Yes, the first one is correct. In the second one, if the screens is exactly 750px wide, both media query sections will apply, which can cause problems.
Concerning your addition:
@media screen and (max-width: 750px) {}
@media screen and (max-width: 970px) {}
In this case the rules in the second query will overwrite those with identical CSS selectors in the first one, which will probably also cause problems.
The usual way would either be the other way round (desktop first approach), or using a mobile-first approach where you first state the general rules for mobile sizes, and then add media queries for larger sizes which overwrite the general rules. That would for example be
@media screen and (min-width: 720px) {}
@media screen and (min-width: 1280px) {}