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

CSS CSS Basics (2014) Enhancing the Design With CSS Web Fonts with @font-face

Posted by Octavio Serrano
Octavio Serrano
2,231 Points

Can someone give me a more specific definition of media queries?

Can someone explain to me more thoroughly what media queries are and what are some examples of their uses? thank you!

1 Answer

michael clark
michael clark
7,372 Points
michael clark
michael clark
7,372 Points

Media queries are used to change the CSS based on the user device. Device properties include it's width and the type of device. This allows us to change our page style based on what type of device the user is using. Media queries run blocks of CSS code if certain conditions are met. For example, this code will make the body background color black when the device width is larger than 500px.

@media (min-width : 500px)  {
    body {
        background-color: black;
    }
}

Mozilla has an extensive reference page for using media queries: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Hope this helps!!