Requêtes de média CSS: max-width OR max-height
Lors de l'écriture d'une requête multimédia CSS, pouvez-vous 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) {
...
}
De https://developer.mozilla.org/en/CSS/Media_queries/
En outre, vous pouvez combiner plusieurs requêtes multimédia dans une liste séparée par des virgules. si l'une des requêtes multimédia de la liste est vraie, la feuille de style associée est appliquée. C'est l'équivalent d'une opération "ou" logique.
Requêtes CSS et opérateurs logiques: bref aperçu;)
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 l'écriture duveteuse. Ce fut une bonne chance de m'apprendre moi-même! Prenez le temps de lire systématiquement et j'espère que cela vous sera utile.
Requêtes de médias
Les requêtes multimédia sont essentiellement utilisées dans la conception Web pour créer des expériences de navigation spécifiques à un appareil ou à une situation; Ceci est fait en utilisant la déclaration @media dans une page CSS . Ceci 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 différents formats d'image, que votre appareil dispose d'un écran couleur ou noir et blanc ou, peut-être le plus souvent, lorsqu'un utilisateur modifie la taille de son navigateur ou bascule entre les appareils de navigation à écran variable tailles (de manière très générale, la conception de ce type est appelée conception de site Web réactif )
Opérateurs logiques
Lors de la conception de ces situations, il semble qu'il y ait quatre opérateurs logiques pour exiger des combinaisons plus complexes d'exigences lorsque ciblant une variété d'appareils ou viewport tailles.
[Remarque: si vous ne comprenez pas les différences entre les règles de support, les requêtes de support et les requêtes de fonctionnalité, parcourez d'abord la partie inférieure de cette réponse pour vous familiariser davantage avec la terminologie associée à la syntaxe de requête de support
1. AND (et mot-clé)
Nécessite que toutes les conditions spécifiées soient remplies avant que les règles de style ne 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 all des éléments suivants est évalué comme étant vrai:
- Le type de média est 'screen' and
- La fenêtre d’affichage mesure au moins 700 pixels de large and
- L'orientation de l'écran est actuellement paysage.
Remarque: Je crois que, utilisés ensemble, ces trois requêtes de fonctions constituent un seul requête de média.
2. OR (Listes séparées par des virgules)
Plutôt que d'un mot-clé o, les listes séparées par des virgules sont utilisées pour chaîner plusieurs requêtes multimédia afin de former une règle de média plus complexe.
@media handheld, (min-width: 650px), (orientation: landscape) { ... }
Les règles de style spécifiées entreront en vigueur une fois toute requête la requête multimédia sera évaluée comme étant vraie :
- Le type de support est "portable" o
- La fenêtre d'affichage a une largeur d'au moins 650 pixels o
- L'orientation de l'écran est actuellement paysage.
3. NOT (not mot-clé)
Le mot clé not peut être utilisé pour nier un seul requête multimédia (et NON un média complet règle - signifiant qu'il nie que les entrées entre un jeu de virgules et non la règle de support complète qui suit la déclaration @media).
De même, note que le mot clé not nie les requêtes multimédia, il ne peut pas être utilisé pour nier une requête 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
- Le type de média ET la résolution minimale les deux ne répondent pas à leurs exigences ('écran' et '300 dpi respectivement) o
- La fenêtre d'affichage fait au moins 800 pixels de large.
En d'autres termes, si le type de support est "écran" et que la résolution minimale est de 300 ppp, la règle not entrera en vigueur sauf si la largeur minimale de la fenêtre d'affichage est d'au moins 800 pixels.
(Le mot-clé not not peut être un peu génial à dire. Faites-moi savoir si je peux faire mieux;)
4. SEULEMENT (seulement mot-clé)
Si je comprends bien, le mot-clé only sert à empêcher les anciens navigateurs d'interpréter de manière erronée les nouvelles requêtes multimédia comme précédemment utilisé, type de support plus étroit. Lorsqu'ils sont utilisés correctement, les navigateurs plus anciens/non conformes doivent simplement ignorer le style.
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
Un navigateur plus ancien/non conforme ignorerait simplement cette ligne de code, car il lirait le mot clé only et le considérerait comme un support incorrect type. (Voir ici et ici pour plus d’informations sur les gens les plus intelligents)
POUR PLUS D'INFO
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 de la requête multimédia
Remarque: je devais apprendre la terminologie suivante pour que tout ce qui est écrit ici ait un sens, en particulier en ce qui concerne le mot-clé not. Voici ce que je comprends
Un média règle (MDN semble également appeler ces déclarations médiatiques) inclut le terme @media avec tous ses noms. questions médiatiques suivantes
@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)
Un média requête est un ensemble de requêtes de fonctions. Elles peuvent être aussi simples qu’une requête d’entités 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é o ci-dessus).
screen (Remarque: une seule requête est utilisée ici.)
only screen
only screen and (max-resolution:800dpi)
only tv and (device-aspect-ratio: 16/9) and (color)
PAS handheld, (min-width: 650px). (Notez la virgule: il y a deux requêtes de média ici.)
Une fonctionnalité query est la partie la plus élémentaire d'une règle multimédia et concerne simplement une fonctionnalité donnée et son statut dans une navigation donnée. situation.
screen
(min-width: 650px)
(orientation: landscape)
(device-aspect-ratio: 16/9)
Extraits de code et informations dérivées de:
requêtes de médias CSS par contributeurs Mozilla (sous licence CC-BY-SA 2.5 ). Certains échantillons de code ont été utilisés avec des modifications mineures visant à clarifier les explications.
Il existe deux manières d'écrire une requête média appropriée en CSS. Si vous écrivez des requêtes multimédia à partir d'un périphérique plus important, la méthode d'écriture correcte sera la suivante:
@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 des requêtes de support pour un périphérique plus petit, cela ressemble à 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 */
}