Est-il de toute façon vous pouvez spécifier plusieurs conditions. I. e.: max-width:995px OU max-height:700px.
@media screen and (max-width: 995px) {
header { ... }
footer { ... }
...
}
Réponses
Trop de publicités?
Utilisez une virgule pour spécifier deux (ou plus) des règles différentes:
@media screen and (max-width: 995px) , screen and (max-height: 700px) {
...
}
À partir de https://developer.mozilla.org/en/CSS/Media_queries/
...En outre, vous pouvez combiner plusieurs requêtes dans une liste séparée par des virgules; si l'une des requêtes de média dans la liste est vrai, les associés de la feuille de style est appliquée. C'est l'équivalent d'un "ou" logique de l'opération.
matthewsheets
Points
431
CSS Media Queries & Opérateurs Logiques: Un Bref Aperçu ;)
C'est beaucoup, mais j'ai essayé de la rendre riche en information, et pas seulement moelleux écrit. C'est une bonne chance d'apprendre par moi-même! Prenez le temps de systématiquement lisez bien et j'espère qu'il sera utile.
Les Media Queries
Les Media queries sont essentiellement utilisés dans la conception de sites web à créer de périphérique ou de la situation spécifique des expériences de navigation; ceci est fait en utilisant l' @media déclaration à l'intérieur d'une page CSS. Ceci peut être utilisé pour afficher une page web différemment dans un grand nombre de circonstances: si vous êtes sur une tablette ou un TÉLÉVISEUR avec différents rapports d'aspect, si votre appareil a une couleur ou en noir et blanc de l'écran, ou, peut-être, le plus souvent, lorsqu'un utilisateur modifie la taille de leur navigateur ou la bascule entre la navigation sur les appareils avec différentes tailles d'écran (très généralement parlant, la conception de ce genre est appelée Responsive Web Design)
Opérateurs Logiques
Dans la conception de ces situations, il semble y avoir quatre Opérateurs Logiques qui peuvent être utilisés pour demander des combinaisons plus complexes des exigences au moment de cibler une variété de dispositifs ou de fenêtre de la taille.
(Remarque: Si vous ne comprenez pas les différences entre les médias, les règles, les requêtes des médias, et en fonction des requêtes, de parcourir la section en bas de cette réponse d'abord à se faire un peu mieux connaissance avec la terminologie associée avec les médias de la syntaxe de requête
1. ET (et le mot-clé)
Exige que toutes les conditions spécifiées doivent être remplies avant que le style de règles entreront en vigueur.
@media screen and (min-width: 700px) and (orientation: landscape) { ... }
Le spécifiée règles de style ne rentrerai pas dans la place, à moins de tous de la suite à évaluer comme vrai:
- Le type de média est 'écran' et
- La fenêtre est au moins 700 pixels de large et
- Orientation de l'écran est actuellement paysage.
Note: je crois que utilisés ensemble, ces trois fonction des requêtes de faire une seule requête de média.
2. OU (séparées par des Virgules listes)
Plutôt que d'un ou de mots clés séparés par des virgules, les listes sont utilisées dans le chaînage de plusieurs requêtes de média ensemble pour former un complexe médias règle
@media handheld, (min-width: 650px), (orientation: landscape) { ... }
Le style spécifié règles entreront en vigueur une fois que toute une media query est évaluée comme true:
- Le type de média est 'de poche' ou
- La fenêtre est au moins 650px de large ou
- Orientation de l'écran est actuellement paysage.
3. PAS (pas de mot-clé)
Le pas de mot-clé peut être utilisé pour annuler une seule requête des médias (et PAS un support complet de la règle- ce qui signifie qu'il annule seulement les entrées entre les virgules et ne pas le support complet de la règle à la suite de la @media déclaration).
De même, notez que le pas de mot-clé nie les requêtes des médias, il ne peut pas être utilisé pour annuler une fonction de requête dans une requête de média.*
@media not screen and (min-resolution: 300dpi), (min-width: 800px) { ... }
Le style spécifié ici restera en vigueur que si
- Le type de support ET min-résolution de ne pas répondre à leurs exigences ('écran" et "300 dpi", respectivement) ou
- La fenêtre est à moins de 800 pixels de large.
En d'autres termes, si le type de média est "écran" et le min-résolution de 300 dpi, la règle sera pas en vigueur à moins que le min-largeur de la fenêtre d'affichage est d'au moins 800 pixels.
(Pas de mot-clé peut être un peu funky à l'état. Laissez-moi savoir si je peux faire mieux. ;)
4. SEULEMENT (seulement le mot-clé)
Si je comprends bien, le seul mot-clé est utilisé pour prévenir les navigateurs plus anciens, d'une mauvaise interprétation plus récente des requêtes de média que la précédente, plus étroit type de média. Lorsqu'il est utilisé correctement, en plus/non-conforme, les navigateurs devraient simplement ignorer le style tout à fait.
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
Un plus / non conforme navigateur juste ignorer cette ligne de code tout à fait, je crois qu'il lisait le seul mot-clé et de le considérer comme un média incorrect type. (Voir ici et ici pour plus d'info de gens intelligents)
POUR PLUS D'INFO
Pour plus d'informations (y compris plus de fonctionnalités qui peuvent être interrogés), voir: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#Logical_operators
Pour Comprendre Les Médias Requête De La Terminologie
Note: j'ai besoin d'apprendre la terminologie suivante pour tout ici pour faire sens, notamment sur le pas de mot-clé. Ici, c'est ce que je comprends:
Un média de la règle (MDN semble aussi appeler ces communiqués de presse) comprend le terme @media avec l'ensemble de ses découlant des requêtes de média
@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 media query est un ensemble de fonctionnalité des requêtes. Ils peuvent être aussi simple comme une caractéristique de la requête ou ils peuvent utiliser le et de mot-clé pour former une requête plus complexe. Les requêtes de média peuvent être séparées par des virgules pour former des milieux plus complexes règles (voir le ou les mots clés ci-dessus).
screen (Remarque: une Seule fonctionnalité de requête en usage 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é de requête est la plus partie de base des médias de la règle et simplement les préoccupations d'une fonctionnalité donnée et de son statut dans une situation de navigation.
screen
(min-width: 650px)
(orientation: landscape)
(device-aspect-ratio: 16/9)
Des extraits de Code et des informations tirées de:
CSS media queries par les Contributeurs de Mozilla (sous licence CC-BY-SA 2.5). Quelques exemples de code ont été utilisés avec des modifications mineures (espérons-le) d'augmenter la clarté de l'explication.
