CSS media breakpoints cheatsheet

I get asked quite frequently for CSS media breakpoints, and although this list is probably far more than you would ever use in a production environment, it’s useful to have as a reference for those special times when you want something pixel-perfect.

Personally, I’m of the opinion that it’s pointless to develop a website that’s not responsive – ie a website that uses¬†media queries to rearrange layouts when the viewport changes.

Not only will multiple users with various-sized devices be able to read the content more clearly, but search engines are more savvy these days with presenting mobile-friendly content as search results to devices.

So without further ado – here are the CSS media breakpoints. Just copy and paste the code to your CSS files.