Welcome to the Treehouse Community
Looking to learn something new?
Media Queries. Please help!
I want to know which screen resolutions I need to pick for the Media Queries for a Website I'm making.
I cannot find an understandable logical walkthrough for this process.
So, which Max-widths do I include? Do I need to include Max-heights/and for what reasons?
Thank you, this has been giving me a headache. =)
Serge Honderdos8,918 Points
To begin with Media Query's a nice practice is to make three different views:
- Mobile (max-width 320px)
- Tablet (max-width 768px)
- Desktop (no Media Query needed)
Although this isn't best practice because now you have to change or add Media Query's for every new device with a slightly different dimension. Responsive is also about being future proof. And because we don't know what kind of weird screen dimensions Samsung is releasing next week we need to anticipate to that. So start with a big (or small) screen width and start narrowing your browser. When things start to fall apart/look weird add a Media Query and add some styles. This way your website will look nice on every device.
Take a look at this very nice blog post from Brad Frost: http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/