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•3y ago

Message Not Public

Aditya KiradOP•3y ago

okay so @media screen will target the screen with specified width so only @media will target what

Unknown User•3y ago

Message Not Public

Aditya KiradOP•3y ago

okay and what's the purpose of and as removing it will make no difference

Unknown User•3y ago

Message Not Public

13eck•3y 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

Gaming

Programming

difference between these two media query

Did you find this page helpful?