Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Joe Williams
4,014 PointsWhen to use "screen" in media queries?
Earlier, I watched a video with Nick where he showed media queries be used as such:
@media screen (min-width: 480px) { }
However, I just watched a video where the instructor simply put:
@media (max-width: 768px) { }
In what situations do you need to use screen, and when is it okay to leave it out? Also, is there a reason you'd want to use min-width instead of max-width and vice versa?
Thanks!
2 Answers
James Barnett
39,199 PointsPart of mobile first web design is designing your site to work on browsers that don't support media queries. Then use media queries to enhance the experience, this is called progressive enhancement.
The only keyword tells a browser to ignore a stylesheet if it doesn't know what a media query is.
For more details check out the hiding media queries from older browsers section of this article
Ken Alger
Treehouse TeacherJoe;
Great questions. Without trying to pass the buck, I would recommend reading the Mozilla Developer Network (MDN) page on media queries as it covers the questions you posed in far greater detail than a simple forum post allows. It covers the different media_types, media_features, etc. that can be used in CCS3.
Happy coding,
Ken