Responsive Design en CSS3 Responsive Web Design : exemple de code
Voici un exemple de code. Ici, quatre <div> sont affichées. En fonction de la résolution du périphérique (max-devicewidth) ou de l'écran (min-width et max-width), l'une des <div> voit son arrière-plan coloré en rouge.
<!doctype html>
<html>
<head>
<meta charset=UTF-8? />
<title>Media Queries</title>
<style>
div
{
border: dotted 1px #666;
padding: 5px 10px;
margin: 40px;
}
@media (max-device-width: 480px)
{
.iphone
{
background: red;
}
}
@media (max-width: 600px)
{
.inf600
{
background: red;
}
}
@media (min-width: 900px)
{
.sup900
{
background: red;
}
}
@media (min-width: 600px) and (max-width: 900px)
{
.de600a900
{
background: red;
}
}
</style>
</head>
<body>
<div class="iphone">Cette div apparaît en rouge si la
largeur maximale de l'écran est de 480 pixels</div>
<div class="inf600">Cette div apparaît en rouge si la
largeur de la fenêtre est inférieure à 600 pixels
</div>
<div class="de600a900">Cette div apparaît en rouge si
la largeur de la fenêtre est comprise entre 600 et
900 pixels</div>
<div class="sup900">Cette div apparaît en rouge si la
largeur de la fenêtre est supérieure à 900 pixels
</div>
</body>
</html>