How do I embed and / or statements in a request for CSS media files?
I want to make a media query that says:
only screen and either
(max-width: 64em) and (min-width: 24em)
or
(orientation: landscape)
In JavaScript notation, what I want would look like this:
if ( screen === true && ( width > 24 && width < 64 ) || orientation === "landscape" )
How should I do it? Can parentheses be used? It will be:
<link
rel='stylesheet'
media='only screen and ( ((max-width: 64em) and (min-width: 24em)) or (orientation: landscape) )' href='style.css' />
Is it possible?
source to share
"or" is expressed with a comma separating two or more whole media queries; "and" with a keyword and
in each media query separating each condition.
Any condition that must be met for all media queries must be repeated in every query; in your case this is a general condition only screen
.
Thus:
only screen and (max-width: 64em) and (min-width: 24em),
only screen and (orientation: landscape)
If you need to use this media query in a CSS attribute @media
and not an HTML attribute media
, please note that the token @media
is only displayed once, since it is not technically part of the media query:
@media only screen and (max-width: 64em) and (min-width: 24em),
only screen and (orientation: landscape)
{
}
source to share