En combinant les CSS media queries

Question

Je veux afficher le même ensemble de styles CSS aux gens l'impression de la page (support=imprimé) et les gens de la navigation sur un téléphone mobile. Est il possible que je peux combiner les CSS media queries?

Quelque chose comme

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

     #container {
         width: 480px;
     }
} 

Answer 1

Séparez-les par une virgule:

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

Voir les specs, en particulier, l'exemple VI (italiques ajoutés):

Plusieurs requêtes de média peuvent être combinés dans un média de la liste de requêtes. Un liste séparée par des virgules des requêtes de médias. Si l'un ou plusieurs des médias des requêtes dans la liste séparée par des virgules sont remplies, la liste entière est vrai, et sinon faux. Dans les requêtes de média de la syntaxe, de la virgule exprime un OU logique, tandis que le ‘et' mot-clé exprime un ET logique.

Je doute que le deuxième only est nécessaire, de sorte que vous pouvez probablement le faire:

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

Answer 2

À partir de https://developer.mozilla.org/en/CSS/Media_queries

Vous pouvez combiner plusieurs requêtes dans une liste séparée par des virgules; si une des requêtes de média dans la liste est vrai, le style associée la feuille est appliquée. C'est l'équivalent d'un "ou" logique de l'opération.

Vous avez juste à supprimer le deuxième @media et ajouter un peu de crochets.

Answer 3

Jetez un oeil à la MDN page sur des requêtes de média. Il décrit l' and et or opérateurs suffisamment de détails que vous devez être en mesure de construire une requête appropriée.