Exercices responsive design

Etape 1 : Testez votre site avec les outils de développement

Que vous utilisiez Chrome ou Firefox, vous pouvez vous servir des Outils de développement pour analyser le contenu des pages web et vérifier que tout s’affiche comme vous le souhaitez. Les outils de développement s’ouvrent avec le raccourci F12.

Ouvrez votre page HTML développée pour l’interface de l’application de gestion de base de données alimentaire. Utilisez le menu Elements pour visualiser la structure de votre document.

Cherchez la fonctionnalité qui permet de simuler différentes tailles d’écran. Cela va vous permettre de voir le rendu qu’aura votre page web sur un écran de téléphone ou de tablette. Que se passe t-il si vous utilisez une taille d’écran de smartphone ?

Etape 2 : Devenez responsive avec les media queries

Sauvegardez votre projet et faites en une copie. Reprenez votre style CSS et ajoutez-y des media queries pour rendre votre page HTML adaptative.

/* Votre ancien css */

/* Vos media queries */
@media all and (max-width: 1024px)
{
  /* TODO */
}

Etape 3 : Appliquez un framework !

Sauvegardez votre projet et faites en une copie. Reprenez votre page HTML et intégrez le framework Materialize CSS ou Bootstrap.