Bloquer par du responsive design

1poussin
Les bases HTML/CSS

Bonjour,
Je dois réaliser un site en responsive design, et je suis complètement bloquée…
J'ai simplifié au maximum mon code et je m'aperçois que mon media querie n'est pas pris en charge !
J'ai pourtant créé mon @media comme je l'ai lu sur des tutos et livres, j'ai beau regarder impossible de trouver la solution, firebug ne me montre pas mes changements css ?!
Merci d'avance pour votre aide.

Voici mon code :
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document sans nom</title>
<style>
body{
background-color : #FF0000;
}
.rouge{
background-color : #FF0000;
float: left;
width: 200px;
height: 100px;
}
.bleu{
background-color : #0000FF;
float: left;
width: 200px;
height: 100px;
}
@media screen and (max-width="320px"){
body{
background-color : none;
}
.rouge{
background-color : #0000FF!important;
float: none;
width: 50px;
height: 100px;
}
.bleu{
background-color : #00FF00!important;
float: none;
width: 50px;
height: 100px;
}
}
</style>
</head>

<body>
<div class="rouge"></div>
<div class="bleu"></div>
</body>
</html>

3 réponses

Arrows78
Réponse acceptée

Comme le dit Brandon, il serait préférable de mettre ton code dans les bonnes balises, c'est plus lisible.

Ensuite concernant les medias queries, ce n'est :

  • Ni ça:

    @media screen and (max-width="320px")

  • Ni ça (comme disait mon VDD):

    @media screen and (max-width=320px)

Mais il faut faire comme cela: 

@media screen and (max-width: 320px)

De plus, est-ce normal que la couleur de fond de ton corps de page soit la même que pour la classe "rouge" ?

1poussin
Auteur

Merci à tout les 2 ;-)

Arrows78

De rien, ravi d'avoir pu t'aider.