I don’t think you should be using standard breakpoints (480, 768, 960, 1024, etc.), but you should open your site in a browser, and resize it smaller/larger to see where your design “breaks”
I just wrote a long post about this on another forum, so I’ll quote (Warning! Long story ahead).
In my opinion, the breakpoint totally depends on the design in question. You should set your breakpoints where your design actually “breaks”. This can be at 1024 wide, but maybe it’s at 1211, or maybe at 1371, or maybe at 934? Resize your browser window and notice where something starts looking wrong.
Make sure everything looks good at every single width. Sometimes this takes one breakpoint, sometimes a bit more.
That way, you’ll be all set when a new device comes out that happens to have a weird random resolution, like 1290 x 723.
Here’s a very random example. Let’s say this is your design for a menu: https://codepen.io/senff/full/JaxvL
Currently there is a breakpoint set at 568px, which is a “common” breakpoint (seeing that is the iPhone 5 landscape width), so once the screen width is smaller than 568, the menu will look different and optimized for mobile.
But, actually try resizing the window and you’ll see that the layout already breaks around 600 pixels: if the window gets any smaller than that, the last item wraps. Make it even smaller, and you’ll get your mobile menu at 568 width. But…yeah, there’s this zone between 568 and 600 where the menu just doesn’t look good.
You might think “yeah but on iPhone it will look good because that’s 568, so that breakpoint will be applied fine“. Thing is, what if the next device you’re using has a screen width of 590? Not all devices are the same resolution as the iPhone.
It’s a very extreme example, but it shows why “common” breakpoints shouldn’t be used blindly. In this very case, I would set the breakpoint at 620 — always a little higher than where it breaks. That way, it will always look good, whether it’s below 568, or above 620, or anything in between.
