Mobile First best practices

Here's a great site I just found. They suggest sticking to just three sizes. They have alot of analytics as to how many people use what size screens as well.

CSS Breakpoints: where & how much? You don't need to write mediaqueries for every possible screen resolution. To keep things simple you could target three groups: smaller than 768 px smaller than 1024 px larger than 1024 px

http://www.websitedimensions.com/

I am just starting the bootstrap courses and they use specific breakpoints based on size. From what I remember going through the courses, they more suggest creating breakpoints at areas that make sense. The reason being is that there are to many devices to account for everything especially with all the various phones.

// Extra small screen / phone xs: 0, // Small screen / phone sm: 544px, // Medium screen / tablet md: 768px, // Large screen / desktop lg: 992px, // Extra large screen / wide desktop xl: 1200px

Bootstraps tablet md: 768px, Guils uses 769px. A little amusing, Where do these numbers come from

These dimensions have stuck since the days where we targeted devices with our breakpoints. You'll tend to see 768px as a breakpoint for tablet type devices because the screen resolution for an apple ipad is 768x1024.

I know this post is 1 month old but I wanted to give my point of view and experience.

So, honestly even though CSS frameworks used some key break points, It's still best practice when you work on a responsive web page to resize the window of your browser step by step, and everytime you see something wrong at a specific resolution, you correct it for this specific resolution.

I agree with what Erik Nuber wrote. There are so many devices to take into account, so stiching only to some resolutions is still not a good idea.

And even if there are some resolutions that are widely used today, you never know what tommorrow will bring!