CODEWITHSUNDEEP
css
ilyo
ilyo

Reputation: 36391

What is the logical structure of multiple @media queries?

I'm not sure I understand the logic of @media conditions, what would be an AND statment and what would be OR?

how would I write a condition like this: 

if ((condition 1 & condition 3) or (condition 2 & condition 3))

in a @media query?

Upvotes: 1

Views: 349

Answers (1)

Dave Taylor
Dave Taylor

Reputation: 2045

Media types are (separated by commas) of a set of rules (delimited by curly braces)

So you would write you above statement:

body { background: green; }
@media screen and (max-width:300px), screen and (min-width: 768px) {
    body {
        background: red;
    }
}

Here's a live example: http://jsfiddle.net/davetayls/tFXWu/

Upvotes: 5

Related Questions