Css media queries: max-width ou max-height

lors de l'écriture D'une requête css media, y a-t-il un moyen de spécifier plusieurs conditions avec "ou" logique?

j'essaie de faire quelque chose comme ça:

/* This doesn't work */
@media screen and (max-width: 995px OR max-height: 700px) {
  ...
}
374
demandé sur Simon East 2012-07-10 03:37:01

2 réponses

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 médias dans une liste séparée par des virgules; si l'une des requêtes médias dans la liste est vraie, la feuille de style associée est appliquée. C'est l'équivalent d'un "ou" logique de l'opération.

750
répondu fcalderan 2013-08-02 11:51:04

CSS Media Queries & Opérateurs Logiques: Un Bref Aperçu ;)

la réponse rapide.

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

La réponse longue.

il y a beaucoup ici, mais j'ai essayé de rendre l'information dense, pas seulement en écrivant léger. C'est une bonne chance d'apprendre par moi-même! Prenez le temps de lire systématiquement et j'espère que ce sera utile.


Media Queries

les requêtes médias sont essentiellement utilisées dans la conception web pour créer des expériences de navigation spécifiques à l'appareil ou à la situation; ceci est fait en utilisant la déclaration @media dans la page CSS . cela peut être utilisé pour afficher une page Web différemment sous un grand nombre des circonstances: si vous êtes sur une tablette ou un téléviseur avec des rapports d'aspect différents, si votre appareil a une couleur ou un écran noir et blanc, ou, peut-être le plus souvent, quand un utilisateur change la taille de leur navigateur ou des commutateurs entre les dispositifs de navigation avec des tailles d'écran variables (très Généralement parlant, la conception comme cela est appelé Responsive Web Design )

Opérateurs Logiques

dans la conception pour ces dans certaines situations, il semble y avoir quatre opérateurs logiques qui peuvent être utilisés pour exiger des combinaisons plus complexes d'exigences lorsqu'ils ciblent une variété de dispositifs ou viewport tailles.

(Note: Si vous ne comprenez pas les différences entre les règles des médias, les requêtes des médias, et les requêtes de fonctionnalités, parcourir la section inférieure de cette réponse d'abord pour obtenir un peu mieux se familiariser avec la terminologie associée à la syntaxe de requête de médias

1. Et ( et mot-clé)

exige que toutes les conditions spécifiées doivent être remplies avant que les règles de style entrent en vigueur.

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

les règles de style spécifiées ne seront pas mises en place à moins que tout évaluer comme vrai:

  • le type de média est "Écran et
  • le viewport est d'au moins 700px de large et
  • l'orientation de L'écran est actuellement paysage.

Note: je crois que utilisés ensemble, ces trois requêtes de caractéristiques constituent un seul requête de médias .

2. OU ( séparée par des Virgules des listes )

plutôt qu'un mot-clé ou , les listes séparées par des virgules sont utilisées pour enchaîner plusieurs requêtes médias ensemble pour former une règle de médias plus complexe

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

les règles de style spécifiées entreront en vigueur une fois que n'importe qui media query estimates as true :

  1. le type de support est "portable" ou
  2. de La fenêtre d'affichage est au moins 650px de large ou
  3. l'orientation de L'écran est actuellement paysage.

3. PAS ( pas mot-clé)

Le pas mot clé utilisé pour annuler un seul "media query (et non un média complet rule --ce qui signifie qu'il ne supprime les entrées entre un ensemble de virgules et non la règle des médias complet suivant la déclaration @media).

de même, note que le Non mot-clé nie les requêtes médias, it ne peut pas être utilisé pour nier une requête caractéristique individuelle dans un requête de mé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 min-résolution ne sont pas de répondre à leurs exigences ('écran" et "300 dpi", respectivement) ou
  2. le viewport a une largeur d'au moins 800 pixels.

en d'autres termes, si le type de support est 'screen' et la résolution minimale est de 300 dpi, la règle n'entrera pas en vigueur à moins que la largeur minimale du viewport ne soit d'au moins 800 pixels.

(le mot-clé not peut être un peu funky à l'état. Laissez-moi savoir si je peux faire mieux. ;)

4. Seulement ( seulement mot-clé)

si je comprends bien, le seulement mot clé est utilisé pour empêcher les navigateurs plus anciens de mal interpréter les requêtes de nouveaux médias comme le type de média plus étroit utilisé plus tôt. Lorsqu'ils sont utilisés correctement, les navigateurs plus anciens/non conformes ne devraient tout simplement pas tenir compte du style.

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

un navigateur plus ancien / non conforme ignorerait tout simplement cette ligne de code tout à fait, je crois qu'il serait lire le seulement mot-clé et de le considérer comme un média incorrect tapez . (Voir ici et ici pour plus d'information de smarter people)

POUR PLUS D'INFORMATIONS

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


Pour Comprendre Les Médias Requête Terminologie

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

A media rule (MDN semble aussi appeler ces déclarations des médias) inclut le terme @media avec toutes ses requêtes des médias qui s'ensuivent

@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édias requête est un ensemble de fonctionnalité des requêtes. Ils peuvent être aussi simples qu'une requête de caractéristique ou ils peuvent utiliser le mot-clé et pour former une requête plus complexe. Les requêtes de médias peuvent être séparées par des virgules pour former des règles de médias plus complexes (voir le mot-clé ou surtout.)

screen (Note: 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)

pas handheld, (min-width: 650px) . (Notez la virgule: Il y a deux questions de médias ici.)

a feature query est la partie la plus fondamentale d'une règle de médias et concerne simplement un fonction donnée et son statut 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és de:

CSS media queries par les Contributeurs de Mozilla (sous licence CC-BY-SA 2.5 ). Certains échantillons de code ont été utilisés avec des modifications mineures pour (espérons) améliorer la clarté de l'explication.

224
répondu matthewsheets 2017-05-23 11:47:21