L'attribut « viewport » permet de préciser au navigateur quelle taille il doit prendre pour afficher une page web.
width=device-width
permet de régler la largeur de la page web sur la largeur de la fenêtre de l'appareil qui consulte actuellement la page
initial-scale=1
permet de régler le niveau de zoom sur 100 % (par défaut).
Pour démarrer une structure de site web responsive, nous utiliserons les balises et attributs suivants :
<!Doctype html> <html> <head> <meta charset="utf-8"> <title>Mon Site Responsive</title > <link rel="stylesheet" href="responsive1.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> ... </body> </html>
Il n'y a pas si longtemps que cela (quelques années) les sites web étaient construits avec des mesures fixes et ne s'adaptaient pas aux différents écrans car il n'y en avait souvent qu'un seul (l'écran d'ordinateur de bureau).
Voici un exemple Html simple SANS responsive design FIXE :
<!Doctype html> <html> <head> <meta charset="utf-8" > <title>Mon Site SANS Responsive</title> <link rel="stylesheet" href="fixe1.css"> </head> <body> <div class="zone-fixe"> Zone Fixe</div> </body> </html>
.zone-fixe{ width: 1000px; background: blue; color: white; padding: 10px; }Explication du code :
width
permet d'indiquer la largeur, dans notre cas elle fera 1000 pixels, ce qui est une taille fixe.background
n'est présente que pour afficher et voir notre zone sur l'écran.Avantages | Inconvénients |
---|---|
Moins prise de tête (normal : aucun responsive) | Plus du tout adapté à notre époque ! |
Voici un exemple Html simple de responsive design fluide :
<!Doctype html> <html> <head> <meta charset="utf-8" > <title>Mon Site Responsive Fluid</title> <link rel="stylesheet" href="fluide1.css" /> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="zone-fluid"> Zone Fluid </div> </body> </html>
.zone-fluid{ background: red; width: 70%; }Explication du code :
width
permet d'indiquer la largeur, dans notre cas elle fera 70 %.background
n'est présente que pour afficher et voir notre zone sur l'écran.Avantages | Inconvénients |
---|---|
Largeur toujours adaptée | Pas de contrôle sur la manière dont s'affichent les éléments dans une situation précise. C'est toujours la même. |
Pour cet exemple, nous retrouvons l'utilisation des pixels. je sais qu'on a dit que l'utilisation des pixels seulement n'était pas une bonne solution, mais là, nous les utiliserons avec les medias queries
Voici un exemple Html simple de responsive design adaptatif :
<!Doctype html> <html> <head> <meta charset="utf-8" > <title>Mon Site Responsive Adaptatif</title> <link rel="stylesheet" href="adaptatif1.css" /> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="zone-adaptative"> Zone adaptative </div> </body> </html>
.zone-adaptative{ background: orange; } @media (min-width: 768px) { .zone-adaptative { width: 750px; } } @media (min-width: 992px) { .zone-adaptative { width: 970px; } } @media (min-width: 1200px) { .zone-adaptative { width: 1170px; } }Explication du code :
width
permet d'indiquer la largeur, dans notre cas .zone-adaptative
n'a aucune largeur particulière (et donc par défaut : la totalité en largeur de la fenêtre).@media
permet d'indiquer et d'adapter la largeur de notre .zone-adaptative
selon la taille et résolution d'écran.background
n'est présente que pour afficher et voir notre zone sur l'écran.@media (min-width: 1200px)
), nous avons donc la place nécessaire pour 1170px.@media (min-width: 992px)
), nous avons donc la place nécessaire pour 970px.@media (min-width: 768px)
), nous avons donc la place nécessaire pour 750px.Avantages | Inconvénients |
---|---|
Contrôle précis dans chaque situation | Beaucoup de code à réécrire |
Alors, qu'est-ce qui serait le mieux entre le fluid et l'adaptatif d'après vous ? les deux comportent des avantages et des inconvénients, mais pourquoi choisir ?
Pour monter en puissance et en efficacité, l'idéal serait plutôt de combiner les deux !!
Un site web responsive design peut être à la fois fluide et adaptatif !
Fluide = utilisation des pourcentages.
Adaptatif = Différence par type d'écran (régles medias queries)
Voici un exemple Html simple de responsive design fluide et adaptatif :
<!Doctype html> <html> <head> <meta charset="utf-8" > <title>Mon Site Responsive Fluide et Adaptatif</title> <link rel="stylesheet" href="responsive-design.css" /> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="zone-1"> <div class="zone-2"> Zone 2 </div> <div class="zone-3"> Zone 3 </div> <div class="clear"></div> </div> </body> </html>
.zone-1{ background: brown; color: white; border: 3px solid #000; } .zone-2{ width: 100%; background: pink; color: white; } .zone-3{ width: 100%; background: gray; color: white; } .clear{ clear: both; } @media (min-width: 768px) { .zone-1 { width: 750px; } } @media (min-width: 992px) { .zone-1 { width: 970px; } .zone-2, .zone-3 { width: 50%; float: left; } } @media (min-width: 1200px) { .zone-1 { width: 1170px; } .zone-2, .zone-3 { width: 50%; float: left; } }Explication du code :
.zone-1
qui fait office de conteneur et qui contient donc les deux autres .zone-2
et .zone-3
width
de la zone .zone-1
n'a aucune largeur particulière (et donc par défaut : la totalité en largeur de la fenêtre).width
de la zone .zone-2
est fixée a 100% de son parent (le parent est zone-1 qui fait la totalité de la fenêtre). idem pour la zone .zone-3
@media (min-width: 1200px)
)float: left;
. Par conséquent zone-2 et zone-3 se retrouvent côte à côte.@media (min-width: 992px)
)float: left;
. Par conséquent zone-2 et zone-3 se retrouvent côte à côte.@media (min-width: 768px)
)float: left;
et prennent 100% de largeur, du coup sur écran réduit elles passeront l'une en dessous de l'autre pour profiter de la pleine largeur dont ils disposent.float: left;
et prennent 100% de largeur, du coup sur petit écran elles passeront l'une en dessous de l'autre pour profiter de la pleine largeur dont ils disposent.
Comme vous le savez, en fonction de la largeur de la fenêtre, la régle « @media » permet de préciser au navigateur quelle propriété CSS il doit adopter et prendre en compte pour l'affichage sur une page web.
Pour cela, le code CSS suivant est à retenir :
@media (min-width: 768px) { ... } /* régle pour les affichages inférieur a 768px de large */ @media (min-width: 992px) { ... } /* régle pour les affichages inférieur a 992px de large */ @media (min-width: 1200px) { ... } /* régle pour les affichages inférieur a 1200px de large */Nous voyons ci-dessus l'utilisation du MIN-WIDTH (pour largeur minimum)
@media (max-width: 768px) { ... } /* régle pour les affichages supérieur a 768px de large */ @media (max-width: 992px) { ... } /* régle pour les affichages supérieur a 992px de large */ @media (max-width: 1200px) { ... } /* régle pour les affichages supérieur a 1200px de large */Ou éventuellement mettre des conditions associées, exemple :
@media (min-width: 768px) and (max-width: 992px) { … } /* régle pour les affichages supérieure a 768px et inférieur a 992px de large */Il est également possible de préciser l'orientation de l'appareil :
@media (orientation: portrait) { … } /* régle pour les affichages en mode portrait */
Pour cela il suffit de redimensionner la fenêtre du navigateur et de la réduire afin de voir si le contenu s'adapte.
Si le site n'est pas responsive design, vous verrez une barre de défilement horizontale s'afficher.
Exemple en plein écran :
Exemple en écran réduit :
RESPONSIVE DESIGN
1. Le Responsive Design 2. Exemples 3. Creer Sa Page Web 4. Site Web Responsive Design