CODEWITHSUNDEEP
cssmedia-queries
user4385532
user4385532

Reputation:

Build a media query for print and screen with min-width

I want to have a stylesheet that is appropriate for print and screens of decent width.

I hope my intent is obvious when I type:

@media print or (screen and (min-width: 801px)) {
    Rules here
}

Sadly, this won’t work.

What is the correct syntax?

Upvotes: 4

Views: 9314

Answers (3)

Mojo Techno
Mojo Techno

Reputation: 96

@media print, screen and (min-width: 801px) {
    .intro_text{
        border: solid 1px blue;
     }
}

works on a Mac (Safari, Chrome and Firefox.) Note the comma and fewer parentheses per:

2.1 Combining Media Queries

"Several media queries can be combined into a comma-separated media query list."

I would think, given:

2.4. Media Features

Media features are always wrapped in parentheses and combined with the and or or keywords, like (color) and (min-width: 600px), rather than being separated with semicolons.

2.5. Combining Media Features

"Media conditions can be grouped by wrapping them in parentheses () which can then be nested within a condition the same as a single media query."

It is invalid to mix and and or and not at the same “level” of a media query. For example, (color) and (pointer) or (hover) is illegal, as it’s unclear what was meant. Instead, parentheses can be used to group things using a particular joining keyword, yielding either (color) and ((pointer) or (hover)) or ((color) and (pointer)) or (hover). These two have very different meanings: if only (hover) is true, the first one evaluates to false but the second evaluates to true.

that some set of parentheses would work, but I can't find one. This must be due to the difference between "Media Queries" and "Media Features." The spec language seems a little unclear at places to me, e.g. the reference to "semicolons" above.

Upvotes: 3

Michael Benjamin
Michael Benjamin

Reputation: 371979

Try this:

@media print, (min-width: 801px) {
    Rules here
}

That would be for OR.

Just FYI, an AND structure would look like this:

@media print and (min-width: 801px) {
    Rules here
}

Upvotes: 5

Johannes
Johannes

Reputation: 67778

Try this (a comma seperates several independent condtions/queries):

@media print, screen and (min-width: 801px) {
    Rules here
}

Upvotes: 8

Related Questions