Quelques astuces pour rendre un site responsive 💡 📐
Balise Méta
Le
viewport(≠ device-width) est une valeur propre à chaque device et est attribuée par le navigateur sur lequel on navigue, par exemple :
- Viewport Safari mobile : 980px
- Viewport Android 1, 2 et 3 : 800px
- Viewport Android 4 : 980px
Meta par défaut à ajouter au code :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
❓ Le zoom initial de l'affichage de l'écran est automatiquement calculée de cette façon :device-width/viewport
- width : Permet de définir la largeur par défaut
- height : Permet de définir la hauteur par défaut
- initial_scale : Niveau de zoom initial (device-width/viewport) (1.0 par défaut)
- minimum_scale : Niveau de zoom minimal, impossible de dézoomer en dessous de cette valeur
- maximum-scale : Niveau de zoom maximal, impossible de zoome au dessus de cette valeur
- user-scalable : Autorise ou non l'utilisateur à zoomer (ex : user-scalable="yes")
- shrink-to-fit=no : Empêche Safari de réduire le contenu de la page pour s'adapter automatiquement
Media Queries
Pour adapter au mieux son affichage et rendre son site ressponsive, les média queries sont souvent indispensables :
@media screen and (max-width: 769px) {.Exemple{ background: red;} }Permet d'agir en fonction de la largeur de l'écran
@media screen and (max-height: 800px) {.Exemple{ background: purple;} }Permet d'agir en fonction de la hauteur de l'écran
@media screen and (min-resolution: 250dpi) {.Exemple{ background: orange;} }Permet d'agir en fonction de la résolution de l'écran (permet de contrôler le zoom)