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 :

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

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)