Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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,915 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.