Question

I try to make this media query work on both desktop when I resize the page and on Mobile phone.

this work on mobile

@media screen and (max-device-width: 320px) {
   ...
}

and this on desktop

@media screen and (max-width: 320px) {
   ...
}

but I can’t make them work both I try to use or operator but didn’t work.

Answer 1

According to the W3 documentation for Media Queries:

Several media queries can be combined in a media query list. A
comma-separated list of media queries. If one or more of the media
queries in the comma-separated list are true, the whole list is true,
and otherwise false. In the media queries syntax, the comma expresses
a logical OR, while the ‘and’ keyword expresses a logical AND.

Use a comma instead of or:

@media screen and (max-device-width: 320px), (max-width: 320px) {
   ...
}