Lors de l'écriture d'une requête multimédia CSS, existe-t-il un moyen de spécifier plusieurs conditions avec la logique "OU"?

J'essaie de faire quelque chose comme ça:

/* This doesn't work */
@media screen and (max-width: 995px OR max-height: 700px) {
  ...
}

Utilisez une virgule pour spécifier deux (ou plus) règles différentes:

@media screen and (max-width: 995px) , screen and (max-height: 700px) {
  ...
}

Depuis https://developer.mozilla.org/en/CSS/Media_queries/

... De plus, vous pouvez combiner plusieurs requêtes multimédias dans une liste séparée par des virgules; si l'une des requêtes multimédias de la liste est vraie, la feuille de style associée est appliquée. C'est l'équivalent d'une opération logique "ou".

CSS Media Queries & Logical Operators: A Brief Overview;)

La réponse rapide.

Séparez les règles par des virgules: @media handheld, (min-width: 650px), (orientation: landscape) { ... }

La réponse longue.

Il y en a beaucoup ici, mais j'ai essayé de rendre l'information dense, pas seulement une écriture moelleuse. Ça a été une bonne chance de m'apprendre! Prenez le temps de lire systématiquement et j'espère que ce sera utile.

Requêtes médias

Les requêtes multimédias sont essentiellement utilisées dans la conception Web pour créer des expériences de navigation spécifiques à l'appareil ou à la situation; cela se fait en utilisant la @mediadéclaration dans le CSS d' une page . Cela peut être utilisé pour afficher une page Web différemment dans un grand nombre de circonstances: que vous soyez sur une tablette ou un téléviseur avec des proportions différentes, que votre appareil ait un écran couleur ou noir et blanc, ou, peut-être le plus souvent, lorsque un utilisateur modifie la taille de son navigateur ou bascule entre des appareils de navigation avec différentes tailles d'écran (de manière très générale, la conception comme celle-ci est appelée Responsive Web Design )

Opérateurs logiques

Lors de la conception de ces situations, il semble y avoir quatre opérateurs logiques qui peuvent être utilisés pour exiger des combinaisons plus complexes d'exigences lors du ciblage d'une variété de périphériques ou de tailles de fenêtres .

(Remarque: si vous ne comprenez pas les différences entre les règles multimédias, les requêtes multimédias et les requêtes de fonctionnalités, parcourez d'abord la section inférieure de cette réponse pour vous familiariser un peu avec la terminologie associée à la syntaxe des requêtes multimédias.

1. ET ( et mot - clé)

Requiert que toutes les conditions spécifiées doivent être remplies avant que les règles de style prennent effet.

@media screen and (min-width: 700px) and (orientation: landscape) { ... }

Les règles de style spécifiées ne seront mises en place que si toutes les conditions suivantes sont jugées vraies:

• Le type de média est «écran» et
• La fenêtre est large d'au moins 700 pixels et
• L'orientation de l'écran est actuellement en mode paysage.

Remarque: je crois qu'utilisées ensemble, ces trois requêtes de fonctionnalités constituent une seule requête multimédia .

2. OU ( listes séparées par des virgules )

Plutôt qu'un mot-clé or , les listes séparées par des virgules sont utilisées pour chaîner plusieurs requêtes multimédias ensemble pour former une règle multimédia plus complexe.

@media handheld, (min-width: 650px), (orientation: landscape) { ... }

Les règles de style spécifiées entreront en vigueur une fois qu'une requête multimédia sera évaluée comme vraie :

1. Le type de support est «portable» ou
2. La fenêtre est large d'au moins 650 pixels ou
3. L'orientation de l'écran est actuellement en mode paysage.

3. NON ( pas mot-clé)

Le mot clé not peut être utilisé pour annuler une seule requête multimédia (et PAS une règle multimédia complète - ce qui signifie qu'il n'annule que les entrées entre un ensemble de virgules et non la règle multimédia complète après la déclaration @media).

De même, notez que le mot clé not annule les requêtes multimédias, il ne peut pas être utilisé pour annuler une requête de fonctionnalité individuelle dans une requête multimédia. *

@media not screen and (min-resolution: 300dpi), (min-width: 800px) { ... }

Le style spécifié ici entrera en vigueur si

1. Le type de support ET la résolution minimale ne répondent pas tous les deux à leurs exigences («écran» et «300 dpi» respectivement) ou
2. La fenêtre est large d'au moins 800 pixels.

En d'autres termes, si le type de support est «écran» et que la résolution minimale est de 300 dpi, la règle ne sera pas entrer en vigueur à moins que le min-largeur de la fenêtre est d' au moins 800 pixels.

(Le mot clé not peut être un peu génial à dire. Faites-moi savoir si je peux faire mieux.;)

4. UNIQUEMENT ( seulement mot-clé)

Si je comprends bien, le seul mot-clé est utilisé pour empêcher les anciens navigateurs d'interpréter de manière erronée les requêtes de médias plus récents comme le type de média plus étroit utilisé précédemment. Lorsqu'ils sont utilisés correctement, les navigateurs plus anciens / non conformes doivent simplement ignorer complètement le style.

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

Un navigateur plus ancien / non conforme ignorerait complètement cette ligne de code, je crois qu'il lirait le seul mot-clé et le considérerait comme un type de support incorrect . (Voir ici et ici pour plus d'informations de personnes plus intelligentes)

POUR PLUS D'INFORMATIONS

Pour plus d'informations (y compris plus de fonctionnalités pouvant être interrogées), voir: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#Logical_operators

Comprendre la terminologie des requêtes multimédias

Remarque: j'avais besoin d'apprendre la terminologie suivante pour que tout ici ait du sens, en particulier en ce qui concerne le mot-clé not . Voici ce que je comprends:

Une règle médiatique (MDN semble également appeler ces déclarations médiatiques) inclut le terme @mediaavec toutes ses requêtes médiatiques qui en découlent.

@media all and (min-width: 800px)

@media only screen and (max-resolution:800dpi), not print

@media screen and (min-width: 700px), (orientation: landscape)

@media handheld, (min-width: 650px), (min-aspect-ratio: 1/1)

Une requête multimédia est un ensemble de requêtes de fonctionnalités. Ils peuvent être aussi simples qu'une requête d'entité ou utiliser le mot clé and pour former une requête plus complexe. Les requêtes multimédias peuvent être séparées par des virgules pour former des règles multimédias plus complexes (voir le mot-clé ou ci-dessus).

screen (Remarque: une seule requête de fonctionnalité est utilisée ici.)

only screen

only screen and (max-resolution:800dpi)

only tv and (device-aspect-ratio: 16/9) and (color)

NON handheld, (min-width: 650px). (Notez la virgule: il y a deux requêtes multimédias ici.)

Une requête de fonctionnalité est la partie la plus élémentaire d'une règle multimédia et concerne simplement une fonctionnalité donnée et son état dans une situation de navigation donnée.

screen

(min-width: 650px)

(orientation: landscape)

(device-aspect-ratio: 16/9)

Extraits de code et informations dérivées de:

Requêtes multimédias CSS par les contributeurs Mozilla (sous licence CC-BY-SA 2.5 ). Certains échantillons de code ont été utilisés avec des modifications mineures pour (espérons-le) augmenter la clarté de l'explication.

Il existe deux façons d'écrire une requête média appropriée dans css. Si vous écrivez d'abord des requêtes multimédias sur un appareil plus grand, la bonne façon d'écrire sera:

@media only screen 
and (min-width : 415px){
    /* Styles */
}

@media only screen 
and (min-width : 769px){
    /* Styles */
}

@media only screen 
and (min-width : 992px){
    /* Styles */
}

Mais si vous écrivez d'abord des requêtes multimédias pour un appareil plus petit, ce serait quelque chose comme:

@media only screen 
and (max-width : 991px){
    /* Styles */
}

@media only screen 
and (max-width : 768px){
    /* Styles */
}

@media only screen 
and (max-width : 414px){
    /* Styles */
}