Site web Responsive

Le Web c'est aussi du mobile

De + en + de mobile même

Source : statcounter.com

Vous devez donc travailler sur le sujet

Mobile First ?

Ou

Desktop First ?

Mon choix… Mobile first.

• Massivement utilisé
• Contrainte plus forte
• Adaptation plus simple

Comment ça fonctionne ?

Repose sur deux choses

Une meta

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

(À ajouter dans votre head)

Des media Queries

/** Valeur par defaut **/
body {
  background: red;
}

/** Valeur pour un viewport <= 800px **/
@media (max-width: 800px) {
  body {
    background: blue;
    color: white;
  }
}

(Dans votre fichier CSS)

Demo

Démo Media Queries « simple »

Mais, mais… c'est complexe en fait ?

Pas vraiment, mais c'est du temps à passer…

Support avec plus détail

On code un peu ?

Mise en pratique

Certains en réfléchi au sujet

Un fonctionnement en 12 Colonnes

1. Colonne
2. Espacement (gutters)
3. Marge (margins)

Quelques bonnes pratiques

Intégré par les frameworks CSS

• Bootstrap
• Tailwind
• Foundation
• …

Repose sur des class « déjà faite »

Exemple avec Bootstrap

<div class="container">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-6">
      100% sur mobile, 50% sur desktop / tablette
    </div>
    <div class="col-sm-12 col-md-6">
      100% sur mobile, 50% sur desktop / tablette
    </div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

Les frameworks vont plus loin

Démo

Beaucoup plus loin

Un système « de composants » pour éviter d'écrire de la CSS « basique »

• Alert
• Bouton
• Table
• …

Démo