1485 sujets

Web Mobile et responsive web design

Affichage media queries

Bonjour,

Je réalise un site internet en responsive design et impossible de constater l'effet de mes medias queries…
J'ai vérifié et re-vérifié mon code et essayé des tutos mais je ne vois pas l'erreur.
J'ai simplifié mon code pour vous montrer :
feuille html

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>test media-queries</title>

<link href="page-test.css" rel="stylesheet"type="text/css"/>
</head>

<body>

<div class="bleu">bleu</div>
<div class="rouge">rouge</div>
<div class="vert">vert</div>
<div class="jaune">jaune</div>

</body>
</html>


feuille css
 
[code=css]@charset "UTF-8";
/* CSS Document */

.bleu{
	background-color:#0e28ec;
	width: 200px;
	height : 200px;
	float:left;
	font-family:"Times New Roman", Times, serif;
	font-size:10px;
	color:#FFF;
	
	}
.rouge{
	background-color:#ec230e;
	width: 200px;
	height : 200px;
	font-family:"Times New Roman", Times, serif;
	font-size:10px;
	float:left;
	color:#FFF;
	}
.vert{
	background-color:#5cec0e;
	width: 200px;
	height : 200px;
	font-family:"Times New Roman", Times, serif;
	font-size:10px;
	float:left;
	color:#FFF;
	}
.jaune{
	background-color:#ece40e;
	width: 200px;
	height : 200px;
	font-family:"Times New Roman", Times, serif;
	font-size:10px;
	float:left;
	color:#FFF;
}
	
	--------------------
@media only screen and (max-width: 320px) {
body{
	background-color: #C30;
	}
	.bleu{
	background-color:#0e28ec;
	width: 50px;
	float:none;
	color:#0e28ec;
	font-family:Verdana, Geneva, sans-serif;
	font-size:16px;
	}
.rouge{
	background-color:#ec230e;
	width: 50px;
	float:none;
	color:#ec230e;
	font-family:Verdana, Geneva, sans-serif;
	font-size:16px;
	}
.vert{
	background-color:#5cec0e;
	width: 50px;
	float:none;
	color:#5cec0e;
	font-family:Verdana, Geneva, sans-serif;
	font-size:16px;
	}
.jaune{
	background-color:#ece40e;
	width: 50px;
	float:none;
	color:#ece40e;
	font-family:Verdana, Geneva, sans-serif;
	font-size:16px;
	}		
		}


Est-ce que quelqu'un a une idée SVP ?
Merci d'avance Smiley bawling
Sujet clos
Aller à