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 Responsive Layouts Media Queries Media Query Review

Juan David Hernandez
Juan David Hernandez
7,415 Points

what's the difference between "print" and "only screen" when we are using media queries?

I don't understand really well, what's the difference if a use this:

@media print and (max-width:600px)

either

@media (max-width:600px)

Or

@media only screen and (max-width:600px)

4 Answers

Raphaël Seguin
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Raphaël Seguin
Full Stack JavaScript Techdegree Graduate 29,228 Points

Well, print is for printed document, it's the opposite of only screen. If you print a page, you might want the presentation to be slightly (or completely) different than the screen. Hope it helps.

Godfrey M
PLUS
Godfrey M
Courses Plus Student 2,696 Points

not clear i am also green for this question we need a teacher to explain this please this is a serious question??

Steve Gallant
Steve Gallant
14,943 Points

If I'm understanding correctly, you would specify "print" to specify a certain CSS layout for printing out the page on paper, regardless of the screen size being used to VIEW the page, i.e. you wouldn't want a page to print out using the mobile device single-column format.