difference between these two media query

hey folks what's the difference between these two
@media (max-width: 600px) {
}
@media (max-width: 600px) {
}
and
@media only screen and (max-width: 600px) {
}
@media only screen and (max-width: 600px) {
}
and what will happen if remove the only keyword from the second query
6 Replies
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
Aditya Kirad
Aditya Kirad2y ago
okay so @media screen will target the screen with specified width so only @media will target what
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
Aditya Kirad
Aditya Kirad2y ago
okay and what's the purpose of and as removing it will make no difference
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
13eck
13eck2y ago
Right now there are three media query types: all, screen, and print. Your first media query, without a type specified, defaults to all. Your second media query will only work for screen but won't apply any of the styles when printing (or saving as a PDF, since that uses the print functionality on most browsers). For more info, here's the MDN page: https://developer.mozilla.org/en-US/docs/Web/CSS/@media
Want results from more Discord servers?
Add your server