Introduction au Responsive Design

Le Web Mobile

Site Web Mobile : On peut faire le choix de créer un site spécifique pour les smartphones et tablettes

Responsive Design : On peut avoir un seul site qui s'adapte à tout types d'écrans (donc les écrans smartphones et tablettes)

Des éléments fluides (plus de pixels)
Adaptation du contenu au viewport du terminal
Des média queries qui donnent des règles différentes en fonction des tailles différentes

Éventuellement des détections et adaptations Javascript
Une philosophie mobile first où l'on part de l'affichage mobile pour aller vers l'affichage desktop

Statique : dimensions figées en pixels
Fluide (ou liquide) : dimensions exprimées en unités variables (%, em, vh, vw ...) qui s'adaptent à la taille d'écran
Adaptatif : dimensions figées en pixels mais qui s'adaptent grâce aux média queries
Responsive : dimensions fluides et adaptées avec les média queries

Il existe différents types de designs pour une page

Différentes surfaces :

La surface viewport est bien plus grande que la surface physique ou utilisable.

Les navigateurs mobiles veulent pouvoir caler un site classique dans leur petit écran.

Le niveau de zoom initial (initial scale) :

Pour afficher un site sur un petit écran, le navigateur calcul un "dé-zoom" en calculant surface utilisable / surface viewport

Pour un iPhone 5 :

Safari veut intégrer une page sur la surface viewport (980px) alors que la surface utilisable est de 320px.

Il applique donc un zoom de 320/980 = 0.326

Elle permet de spécifier le niveau de zoom voulu et bien d'autres choses !

Zoom : 0.3 (par défaut) - 980px

Zoom : 1 (avec balise meta) - 320px


<meta name="viewport" content="width=device-width, initial-scale=1.0">

Elles permettent l'application de certaines règles CSS en fonction du contexte dans lequel on se trouve :

Elles permettent d'être très précis grâce à une syntaxe qui permet de les "enchainer" :

@media screen 
       and (min-width: 200px) 
       and (max-width: 640px) {
    /* règles CSS spécifiques */
}

1vw : 1% de la largeur du viewport
1vh : 1% de la hauteur du viewport
1vmin : 1% de la dimension la plus petite (hauteur ou largeur)
1vmax : 1% de la dimension la plus grande (hauteur ou largeur)
Et bien sur : rem (taille de police relative à la taille de police de l'élément HTML)