Let’s break down your examples one by one.
This one is saying for a window with a
max-width of 632px that you want to apply these styles. At that size you would be talking about anything smaller than a desktop screen in most cases.
@media screen and (max-width:632px)
This one is saying for a device with a
screen and a window with
max-width of 632px apply the style. This is almost identical to the above except you are specifying
screen as opposed to the other available media types the most common other one being
@media only screen and (max-width:632px)
Here is a quote straight from W3C to explain this one.
The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.
As there is no such media type as “only”, the style sheet should be ignored by older browsers.
Here’s the link to that quote that is shown in example 9 on that page.
Hopefully this sheds some light on media queries.
Be sure to check out @hybrids excellent answer on how the
only keyword is really handled.