Media Queries : problème de débutant

Bonjour,

J'utilise les 3 media queries :

@media only screen and (max-width: 1024px) {}
@media only screen and (max-width: 768px) {}
@media only screen and (max-width: 667px) {}

qui me semblent suffisant pour répondre à la plupart des contraintes responsives.

Mais comment faire pour que les classes CSS de l'un n'impacte pas les suivantes ?

Exemple : si je paramètre @media only screen and (max-width: 768px) {}, les styles s'appliquent aussi à @media only screen and (max-width: 667px) {}

Comment contraindre les styles à un seul format d'écran ?

Hello,

Si tu veux que tes styles s'appliquent uniquement entre 668px et 768px, tu peux écrire ceci par exemple :

@media only screen and (min-width: 668px) and (max-width: 768px) {}

Ainsi, grâce à ton "min-width: 668px" tu n'auras pas d'impact sur les écrans plus petits.

PS : je pense que le "only" et le "screen" ne sont plus guère utiles aujurd'hui.
PS2 : il y a un article sur les Media Queries sur Alsacréations
https://www.alsacreations.com/article/lire/930-css3-media-queries.html
Modifié par Raphael (13 Jan 2018 - 18:52)

Merci beaucoup Raphaël ! Pour démarrer 2018, je tiens avant tout à te remercier pour tout le temps que tu passes à rédiger des tutos super pros et répondre au questions de débutants avec simplicité et précision. Alsacreations reste encore aujourd'hui le forum de référence pour toutes les problématiques web et il y a de bonnes chances que ça dure !

Et sans surprise, tu m'apportes la solution qui vient confirmer les exemples que j'avais relevés : https://gist.github.com/staydecent/1021805

Et j'avais également trouvé le tuto Alsacreation de 2011 qui est, comme beaucoup de tutos Alsa, très bien référencé, mais comme il rentre pas mal dans le détail, je me le suis mis de côté pour prendre le temps de tout comprendre ultérieurement.

Enfin, si "only" et "screen" ne sont plus utiles est-ce que ça donne :

@media  (min-width: 668px) and (max-width: 768px) {}