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

Posted by brandonlind2
brandonlind2
7,823 Points

Can someone explain to me the difference between @media and @media screen?

What's the difference between @media and @media screen?

1 Answer

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,862 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,862 Points

Hey Brandon,

@media is the actually media query. The word screen is adding the 'conditions' to the media query.

So @media screen is telling the media query to apply (whatever other conditions) to screens.

For example, @media screen and (max-width: 360px) will target only screens with a max-width of 360px.

You could also do print: so @media print ... will only style anything being printed.

So, in short, the 'screen' is just adding a condition to the media query to say affect only screens with ...

Hope that clear it up for you. Keep Coding! :)

brandonlind2
brandonlind2
7,823 Points

Thanks man! :)

brandonlind2
brandonlind2
7,823 Points

Thanks man! :)

rajbee
rajbee
6,657 Points

Why do we need to have a media print and a media screen, when all we do is change our display based on the width of the output (i.e. screen/paper) ? Why not just have a single media query ?

At about 3:15 in the video he says that "Screen tells us that we want to target digital screens instead of print media when the web page is printed out." How does it matter ?

Jason Anders
Jason Anders
Treehouse Moderator 145,862 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,862 Points

Hey Raj,

There will actually be many differences. To name just a few with @media print

(1) Instead of printing out the actual hyperlink (as it's shown on screen), you could print out the name, phone number, etc. (Done using attributes set up in the tags). (2) You probably won't want to print out all the images that are displayed. (3) Changed the font to a more printer friendly version (not all fonts on screen translate well to print). (4) Change the font size for print (a 48px h1 will not go over well when printing out). (5) You can't print videos to paper... so...

These are just some of many adjustments you should make if you know your page is likely to be printed often. If there is little to no chance your page will be printed, you don't need to be as detailed with the @media print, but you should still set up a basic query for printing.

Keep Coding! :)