web-dev-qa-db-fra.com

Combinaison de requêtes multimédia CSS

Je souhaite afficher le même ensemble de styles CSS aux personnes imprimant la page (média = imprimer) et aux personnes naviguant sur un téléphone mobile. Existe-t-il un moyen de combiner des requêtes multimédia CSS?

Quelque chose comme

@media only print or @media only screen and (max-device-width: 480px) {
  #container {
    width: 480px;
  }
}
cssmedia-queries
45
Kevin Burke

Séparez-les par une virgule:

@media only print, only screen and (max-device-width: 480px)

Voir la spécification , en particulier, l'exemple VI (soulignement ajouté):

Plusieurs requêtes multimédias peuvent être combinées dans une liste de requêtes multimédias. Une liste de requêtes multimédias séparées par des virgules. Si une ou plusieurs des requêtes multimédias de la liste séparée par des virgules sont vraies, la liste entière est vraie et sinon fausse. Dans la syntaxe des requêtes multimédias, la virgule exprime un OU logique , tandis que le mot clé ‘et’ exprime un ET logique.

Je doute que le second only soit nécessaire, vous pouvez donc probablement faire:

@media only print, screen and (max-device-width: 480px)
62
James Allardice

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

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".

Il suffit de supprimer le second @media et ajoutez quelques parenthèses.

3
entropid