Media Querie n'est pas chargé par google chrome

Petit nouveau ! | 1 Messages

08 juin 2022, 19:26

Bonjour, je débute dans les media queries, je ne comprend pas pourquoi mon code css @media n'est pas chargé par google chrome alors qu'il fonctionne très bien sur firefox.
Est-ce que qqn pourrais me dire d'où viens mon erreur ? ou si il me manque un morceau de code ?
J'ai lu un poste qui disait d'ajouter un meta viewport mais cela ne fonctionne pas non plus ... ou alors j'ai pas tout compris.

Le principe est tout simple : changer les couleurs de fonds des div en fonction de la hauteur de fenêtre.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document sans nom</title>
</head>
<style type="text/css">
	.Div1{
		background-color: darkred;
	}
	.Div2{
		background-color: darkblue;
	}
	
	
@media (height <= 100vw){
	.Div1{
		background-color: grey;
	}
	.Div2{
		background-color: yellow;
}
	
</style>
<body>
	<div class="Div1">La div Rouge</div>
	<div class="Div2">La div Bleu</div>
</body>
</html>

ynx
Mammouth du PHP | 586 Messages

09 juin 2022, 11:16

Bonjour,

Tu as une erreur de syntaxe dans ton code css : il manque une accolade pour fermer le bloc @media.
Penses à utiliser le validateur css et à indenter correctement ton code pour ce éviter ce genre d'erreur, néanmoins ton problème ne vient pas de là.

Ta media query ne fonctionne pas sur Chrome car tu utilises la dernière syntaxe (niveau 4) pour définir les conditions de la query, or cette syntaxe n'est pas encore supportée par Chrome, uniquement par Firefox pour l'instant.
https://developer.mozilla.org/fr/docs/W ... e_niveau_4
https://caniuse.com/mdn-css_at-rules_media_range_syntax

Il faut donc définir les conditions de ta query en utilisant la syntaxe classique : @media (min-height: 100vw) à la place de @media (height <= 100vw)