28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Savez-vous s'il est possible de cibler plusieurs créneaux de tailles avec une seule déclaration media-querie ?

Par exemple les breakpoints suivants :
- 100px
- 200px
- 300px
- 400px

Par exemple si je souhaite appliquer des styles lorsque la largeur du media est :
- inférieure ou égale à 100px
- ET comprise entre 300 et 400px

Peut-on résumer ceci en une seule requête ?
Modifié par Greg_Lumiere (13 May 2016 - 13:24)
Il suffisait que je poste la question pour (enfin) trouver la réponse : la virgule !

Ce qui donne ceci
@media all and (max-width: 100px), (min-width: 300px) and (max-width: 400px) {}




" Et voilà l'travail ! " Smiley biggthumpup
Administrateur
Greg_Lumiere a écrit :

Par exemple si je souhaite appliquer des styles lorsque la largeur du media est :
- inférieure ou égale à 100px
- ET comprise entre 300 et 400px

Hello,

Attention, il faut bien distinguer "ET" et "OU".
- ce que tu souhaites est un "OU", et c'est effectivement une virgule.
- le "ET" serait "and"
- et il existe aussi "not" pour ce genre de choses par exemple : @media (max-resolution: 2dppx) and not print

Bon week-end Smiley smile
Raphael a écrit :

Hello,

Attention, il faut bien distinguer "ET" et "OU".
- ce que tu souhaites est un "OU", et c'est effectivement une virgule.
- le "ET" serait "and"
Le and est maîtrisé mais c'est la première fois que je suis confronté à un cas d'exclusion Smiley confused

Raphael a écrit :

- et il existe aussi "not" pour ce genre de choses par exemple : @media (max-resolution: 2dppx) and not print
Cela présuppose-t-il qu'il faille indiquer and avant not systématiquement ? Ben tu vois je vais me garder ce trick sous le coude car quelque-chose me dit que tantôt j'en aurais besoin.

Merci Raphaël et
Raphael a écrit :
Bon week-end Smiley smile
à toi aussi ainsi qu'aux lecteurs Smiley smile


PS : L'avez-vous remarqué, un "e" accent aigu dans le titre d'un sujet du forum est convertit en "n" dans l'url ?!
Modifié par Greg_Lumiere (14 May 2016 - 09:24)