/19-20_TWOIng4_TP2

TP2 de technologies web OCRES Ing4 pour l'année 2019/2020

Primary LanguageCSS

TP 2

A lire impérativement avant de commencer quoi que ce soit, ce sont les règles que vous devrez appliquer tout au long du semestre:

Règles pour le semestre

Instructions

  1. Ajouter bootstrap à votre projet

  2. Centrer les éléments sur la page grace à un container Bootstrap

  3. Utiliser la grille fluide de Bootstrap pour définir la largeur des éléments :

    • Menu
    • Partie principale
  4. Utiliser les classes de grille (col-xs-_ / col-md-_ etc.) pour afficher successivement les albums par 6 sur grand écran, 4 pour les tablettes et 2 en dessous. Vous trouverez des images dans le répertoire design qui montrent ce qui est attendu pour chacun des appareils.

  5. Utiliser Bootstrap pour :

    • Masquer la colonne de gauche sur mobile et sur tablette en mode portrait (display utilities)
    • Aligner les liens Collection et History à droite lorsque l'espace disponible devient insuffisant
    • Mettre en place le menu déroulant (en haut à droite)
  6. Remplacer toutes les tailles de police en pixel par des unités relatives (em ou rem)

  7. Régler le viewport pour les mobiles

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

Cela permet d'eviter que l'utilisateur zoom dans votre page web pour naviguer

  1. Utiliser les medias queries pour :

    • Masquer le champs de recherche lorsque l'espace disponible devient insuffisant
    • Masquer les icônes twitter et facebook sur mobile
    • Ajuster la taille du texte aux 3 points de ruptures suivants : 1400px (grossir) / 600px (plus petit) / 450px (encore plus petit)
  2. Redimensionner la fenêtre du navigateur ou émuler la taille du device à travers la console dévelopeur. Tester que la page est visuellement cohérente à toutes les résolutions. Faire les ajustements nécessaires avec les media queries.