CODEWITHSUNDEEP
cssmedia-queries
keldar
keldar

Reputation: 6242

Media Queries - combining AND/OR

I am trying to create a media query which, in pseudo code, reads as the following:

@media min-aspect-ratio: 4/3 AND (min-width: 550px OR min-height: 550px)

But I cannot work out the correct syntax. So far, the closest I can think of is:

@media all and (min-aspect-ratio: 4/3) and ((min-width: 550px), all and (min-height: 550px))

Since, in media queries, a logical or is the equivalent to comma separated values, hence the min-width or min-height.

Can someone assist please

Upvotes: 0

Views: 94

Answers (1)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123367

Since 

A and (B or C)

could be expanded as 

(A and B) or (A and C)

then you could transform the expression into 

@media (min-aspect-ratio: 4/3) and (min-width: 550px),  // A and B
       (min-aspect-ratio: 4/3) and (min-height: 550px)  // A and C

the comma (,) is equivalent to the or condition

Upvotes: 1

Related Questions