CODEWITHSUNDEEP
androidcssmedia-queriesresponsive-design
jcubic
jcubic

Reputation: 66660

How to create media query that work for both device-width and width

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.

Upvotes: 0

Views: 389

Answers (1)

jeffjenx
jeffjenx

Reputation: 17487

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) {
   ...
}

Upvotes: 2

Related Questions