What are some common media query breakpoints and how do you choose them for your projects?

You should also consider that on smaller devices such as mobile and/or tablet, clicking a button may not be as easy as controlling a mouse to click it. You may want to make your CTA buttons bigger for a better user experience.

Important to remember that media queries have an optional type. Some of them are: `all` (default), `print` and `screen`. You can use other operators as well not just `min-*`/`max-*`. And you can also combine them with logical operators like `and`, `or` and `only`.

When it comes to setting media query breakpoints, it's all about ensuring your website looks great on any device people might use. Think about it: from large desktop screens to small smartphones, each one needs to display your content in a way that's easy to read and navigate. Here are some breakpoints: XXL: 1600px and above XL: 1440px to 1599px L: 1024px to 1439px (covers tablets in landscape mode) M: 768px to 1023px (covers tablets in portrait mode) S: 481px to 767px (covers large smartphones and small tablets) XS: 320px to 480px (covers small smartphones) However, remember that sometimes you might need to tweak these breakpoints or even create your own to ensure a seamless User Experience across all devices.

Define your breakpoints based on your user base and data. Go to a website like https://gs.statcounter.com/screen-resolution-stats to see the most used screen sizes and use that as your base.

Utilize widely accepted standards unless you have a strong reason to deviate in order to maximize developer productivity, interoperability, and user satisfaction. Start with the breakpoints suggested by a modern design library like Material UI or Bootstrap. A convenient approach is to simply have a mobile view and a desktop view, divided at the 1200px breakpoint which is shared by both of these major design libraries.

I do not use a specific break point, but I design the entire website based on desktop design first, then move on to responsive design. I usually decide the breakpoint for the majority of components or elements that break the view, so it is unique to each project and improves the user experience.

Whatever breakpoints you end up picking, make sure you test them on actual devices and across different browsers instead of relying on your browser's Inspector window. Different devices and browsers can render things differently which you might not catch if you are just using the Inspector tool. For example, I recently was working on a filter UI that worked on desktop and it appeared to work on mobile sizes when using Chrome's Device Mode. Before making the page live, I checked the page on my actual phone and discovered some bugs with the filtering that caused all the elements to stack on top of each other instead of returning to their proper positions.