问题
What does the 'only screen' code mean in a media query?
//See below the 'only screen' part of the code
@media only screen and (min-device-width: 320px)
I have used code that works without the 'only screen' part of the code. What does it do or how does it help?
回答1:
From https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
only: The only keyword prevents older browsers that do not support media queries with media features from applying the specified styles. It has no effect on modern browsers.
The screen keyword references that it's a computer, mobile phone or tablet etc. There are two other media types, print and speech, as well as the default all.
Simply: The only keyword is optional and used for backwards compatibility. The screen keyword will default to all.
回答2:
@media only screen and (min-device-width: 320px)
As you said and it's true that code can run without only screen but when you use it that means you are only targeting screens like desktop, laptop, tablet, mobile etc. screen devices not other media devices like printing media and screen readers etc.
resource: https://www.w3.org/TR/CSS2/media.html
来源：https://stackoverflow.com/questions/56198043/what-does-the-only-screen-code-mean-in-a-css-media-query