@media dans une feuille CSS

Bonjour,
Quand je teste en local, sous WAMP, l'affichage est correct, les règles du @media dans ma feuille CSS sont respectées
Seul l'un des deux menus apparaît

Par contre, en réel, (Hébergeur GANDI), ces règles sont ignorées au premier affichage !
Les deux menus sont présents
Au premier lien que je lance, il semble que les règles du @media sont trouvées ....
De nouveau seul l'un des deux menus apparaît

@media all and ((min-width: 1000px) and (max-width: 90000px)) {
		.menu2 {
			display: none;
		}
	}
	@media all and ((min-width: 100px) and (max-width: 999px)) {
		.menu1 {
			display: none;		
		}
		.PUBLICITE {
			display: none;
		}
	}

Quel est mon erreur ?

Configuration: Windows / Internet Explorer 11.0
Cordialement
SC

Pour la rédaction les feuilles de styles CSS, il y aune règle de base:
"mobile first"
Cela concerne directement 50% des visiteurs.
Pour les autochtones, résumons par :
"Les smartphones en premier"
On commence sa rédaction par l'affichage sur smartphone, puis on passe aux tablettes,
puis au ordinateurs portables, au PCs et on finit par les Mac Pro à 5000px de large

/*
Par défaut:
.menu1 { display: block; }
.menu2 { display: block; }
.PUBLICITE { display: block; }
*/
@media all and ((min-width: 100px) and (max-width: 999px)) {
    .menu1 { display: none; }
    .PUBLICITE { display: none;  }
    /* on affiche uniquement .menu2 */
}
@media all and ((min-width: 1000px) and (max-width: 90000px)) {
    .menu2 {  display: none; 	}
    /* on affiche .menu1 et .PUBLICITE */
}

Ce n'est pas très cohérent d'avoir 2 menus.
Modifié par bazooka07 (06 Jul 2018 - 11:12)

Bonjour,
sans être un spécialiste, loin de là, je vois une accolade supplémentaire dans votre code :

@media all and ((min-width: 1000px) and (max-width: 90000px)) 

deux (( avant min-width et une seule après px. Idem pour la suite. Je n'ai aucune certitude que le problème vienne d'ici, mais en tous cas, je ne crois pas que ce soit normal. Vous pouvez toujours essayer avec cette correction. Après, il faudra faire appel à d'autres compétences.

Cordialement.

Attention Bongota
Bonjour,
Sauf erreurs de ma part, les parenthèses sont bien équilibrées
Une pour ouvrir puis fermer le Min-width et le max-width
Une pour ouvrir puis fermer les deux arguments
Cdlt
SC

Attention bazooka07
Bonjour,
Merci pour votre aide
J'ai deux menus, car pour les petits formats, c'est une TextBox, et une suite de bouton pour les autres
Cdlt
SC

Normalement, il n'y a qu'un menu par page HTML. La structure classique ressemble à ceci :

	<nav>
		<label for="nav-id">Menu</label>
		<input id="nav-id" type="checkbox" />
		<ul>
			<li><a href="accueil.html">Accueil</a></li>
			<li><a href="entree-1.html">Entrée 1</a></li>
			<li><a href="entree-2.html">Entrée 2</a></li>
			<li><a href="entree-3.html">Entrée 3</a></li>
		</ul>
	</nav>

Après, on joue avec les règles CSS selon la taille de l'écran.
Modifié par bazooka07 (06 Jul 2018 - 15:03)

Bonjour,
oui, il y a bien équilibre des accolades dans votre code. Je ne savais pas que l'on pouvait (ou devait) les doubler. Je n'en ai toujours utilisé qu'une. Mais si ça fonctionne, tant mieux.

Faites comme ça voir :

@media all and (min-width: 1000px) and (max-width: 90000px)