CSS The Media Queries Solution

Why was I under the impression we had to use @media screen and (min-width)?

So I completed the task without looking at the solution video, however for each media query I had used the following code:

@media screen and (min-width= 576px) {}

It achieved the exact same result, however upon watching the solution video I noted that the tutor didn't use the "screen" media type. Having made the changes to my code, I have also confirmed that it works without the screen media type being specified... so what exactly is the screen media type used for?

Sorry if this seems like a silly question, I am a little confused as to it's function/purpose.

1 Answer

Jennifer Nordell
Jennifer Nordell
Treehouse Teacher

Hi there, Thomas Bathurst! The media type, in this case screen is optional. If you do not specify it, it automatically assumes all, I believe. The other media types are print and speech. The print would be used if you wanted to make sure that documents showed up nicely in a "print preview" mode. Screens are for screens. And speech has to do with speech synthesizers.

Because we want this CSS to apply to all, it's reasonable to leave out media queries that are specific to speech and print.

Hope this helps! :sparkles:

Here's the Media Types documentation. And yes, the default is all :smiley:

Thanks so much for clearing that up Jennifer. The answers seem so obvious when somebody explains it to you!

My head hurts 😅