Responsive Web Design

Raconté par Vincent Jugé
sur la base d'un cours créé par Rémi Forax

Responsive Web Design

Repose sur 3 idées :

Media Queries CSS ;
On place les éléments sur une grille fluide (grid) ;
Images flexibles en unités relatives (em ou %).

Devient une réalité suite au Google Mobilegeddon.

Autres termes

Mobile first: On développe le site web pour mobile et on tripatouille le CSS pour qu'il s'adapte aux écrans d'ordinateur.
Progressive enhancement: On affiche les données importantes d'abord, on charge progressivement avec des scripts supplémentaires pour offrir de l'interactivité.

CSS3 Media Queries

Media Queries	juin 2012
Media Queries level 4	sept 2017

Sélecteur @media

Le sélecteur @media permet d'appliquer des règles CSS différentes en fonction par exemple de la taille de la zone d'affichage (viewport).

body {
  background-color: silver;
}
@media screen and (min-width: 480px) {
  body {
    background-color: tan;
  }
}

Type d'afficheurs

@media est suivi d'un type d'afficheur parmi

all : tous types d'afficheurs (par défaut) ;
screen : page affichée à l'écran ;
print : page imprimée ;
speech : page lue, pour les malvoyants.

@media screen {
  body { background-color: black; }
}
@media printer {
  body { background-color: white; }
}

min-width et max-width

min-width indique la taille minimum (min) :
le sélecteur s'applique si la taille courante est ≥ min ;
max-width indique la taille maximum (max) :
le sélecteur s'applique si la taille courante est ≤ max .

body { background-color: silver; }
@media screen and (min-width: 450px)  {
  body { background-color: lightblue; }
}
@media screen and (max-width: 250px)  {
  body { background-color: tomato; }
}

Composition de @media query

On utilise and pour appliquer plusieurs critères.
On utilise not pour inverser les critères.

body { background-color: silver; }
@media screen and (min-width: 250px) and (max-width: 450px)  {
  body { background-color: tan; }
}

Ou entre @media queries

Pour faire l'équivalent du ou,
on sépare les critères par des virgules.

body { background-color: silver; }
@media screen and (max-width: 250px), (min-width: 450px)  {
  body { background-color: tan; }
}

Media Query en HTML

On peut indiquer le media dans la balise link
mais, en pratique, on le fait pas, car le browser chargerait tous les fichiers avant d'appliquer le bon.

<link rel="stylesheet" media="screen and (min-width: 1200px)" href="wide.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css">

Affichage sur mobile ?

Sur mobile on ne veut pas de barre de défilement horizontale, donc on fixe la largeur du viewport.

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

initial-scale est le facteur de zoom.

Grille fluide

Affichage sur mobile ?

On affiche chaque div avec une largeur de 100%.

* {
  box-sizing: border-box;  /* les tailles sont celles de la boite ! */
}
.title {
  background-color: tan;
  width: 100%;
}

Ne pas oublier de contrôler le viewport avec la balise meta !

HTML d'une grille simple

col-1 est une case qui prend une colonne,
col-2 est une case qui prend deux colonnes.

<div class="row">
  <div class="col-2 title">Titre</div>
</div>
<div class="row">
  <div class="col-1 fact">div avec col-1</div>
  <div class="col-1 fact">div avec col-1</div>
</div>
<div class="row">
  <div class="col-2 story">div avec col-2</div>
</div>

CSS d'une grille simple

* {box-sizing: border-box; }
.row::after {
  content: "";
  clear: both;
  display: table;
}
.col-1 { width: 50%; float: left; padding: 15px; }
.col-2 { width: 100%; float: left; padding: 15px; }

Faire une grille simple

Dans chaque case de la grille,
on met un div qui contient le texte.

<div class="row">
  <div class="col-2"> <div class="title">Titre</div> </div>
</div>
<div class="row">
  <div class="col-1"> <div class="fact">div avec col-1</div> </div>
  <div class="col-1"><div class="fact">div avec col-1</div> </div>
</div>
<div class="row">
  <div class="col-2"> <div class="story">div avec col-2</div> </div>
</div>

Avec une media-query

[class*="col-"] {
  float: left;
  padding: 15px;
  width: 100%;
}
@media only screen and (min-width: 400px) {
  .col-1 { width: 50%; }
  .col-2 { width: 100%; }
}

Une vraie grille

Souvent, les grilles ont 12 tailles de colonne…

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

mais le principe est le même.

D'autres façons de faire des grilles

qui permettent surtout un meilleur alignement vertical

flexbox: ne marche que sur un seul axe.
grid: supporté seulement récemment sur macOS/iOS.

Textes et Images Flexibles

Texte Flexible

vw : pourcentage en fonction de la largeur du viewport.
vh : pourcentage en fonction de la hauteur du viewport.

.heading1 { font-size: 10vw; }
.heading2 { font-size: 8vw; }
.heading3 { font-size: 6vw; }

Cela évite d'essayer de calculer la taille de la fonte en px, pt ou em.

Image Flexible

width agrandit/rétrécit l'image pour qu'elle tienne en largeur.
max-width rétrécit l'image pour qu'elle tienne en largeur.

.lena {
  /*width: 100%; */
  max-width: 100%;
}

Image Multi-Taille

La balise HTML5 picture accepte aussi les media-queries.

<picture>
  <source srcset="lena-small.jpg" media="(max-width: 400px)">
  <source srcset="lena.jpg">
  <img src="lena.jpg" alt="Lena">
</picture>