All Device Media Queries
With so many mobile device screen sizes available these days, designing and developing for 1024/768/480/320 pixel widths doesn’t cut it anymore (and hasn’t for a while). To help with this, I propose a catch all. I’ve found this method to be especially helpful when I’m working with a less fluid design that requires more media query break points or when I’ve got limited time to finish a project.
Here’s how it works: use media queries to make sure your site design works these four widths: 320px, 480px, 768px, 1024+ px. Then alter the max-width setting of each one to be a single pixel lower than the next design width step up. Like so:
1024px design: no media query (unless you’re using a mobile first approach)
768px design: use a 1023px media query
480px design: use a 767px media query
320px design: use a 479px media query
With this simple method, the media queries should enable your designs to work on any device that visits your site. The convenience here is if you get wider designs (1200px is fairly common for me these days), you can just add query break points as needed. Alternatively, you can alter the widths to best suit your design or project. Enjoy!