A nice guide, but there's a problem with the responsiveness queries in my opinion.

If you set your breakpoints at the boundaries of common resolutions (768, 1024, 1280, etc) you'll find that they're wrong in weird circumstances. Setting your 'tablet' query to 'min-width: 768px' because that works on an iPad 2 will fail on a Samsung Galaxy Tab running Chrome or an Amazon Fire 8 HD running Silk. It's far better to put the query near the middle of two resolutions eg 900px instead. Media queries should be generalized to cover the layout for devices up to that point, not specific to approximate real world devices. It makes life far simpler in the long run.

Also, there are a lot more things you can query for: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queri...