What is the difference between “screen” and “only screen” in media queries?

Question

What is the difference between screen and only screen in media queries?

Answer 1

@media screen and (max-width:480px) { … } 

screen here is to set the screen size of the media query. E.g the maximum width of the display area is 480px. So it is specifying the screen as opposed to the other available media types.

@media only screen and (max-width: 480px;) { … } 

only screen here is used to prevent older browsers that do not support media queries with media features from applying the specified styles.