Interface adaptable (responsive) en CSS CSS23

Cet exercice consiste à rendre adaptable (au sens de responsive web design) une interface web fournie.

Consignes de l’exercice

Créez un dossier racine à l’emplacement de votre choix.

Téléchargez les fichiers de travail en cliquant ci-dessous et placez les dans voter dossier racine.

L’interface téléchargée à une largeur fixe, elle ne s’adapte donc pas du tout à la taille de la fenêtre du navigateur et/ou de l’écran.

Modifier l’interface afin de la rendre fluide : largeur exprimée en pourcentage mais bornée (ex : 1200px maximum).

Rendez l’interface responsive avec les trois versions suivantes :

  • Interface supérieure à 960px :
Aperçu de l'interface supérieure à 960px
  • Interface entre 576px et 960px :
Aperçu de l'interface entre 576px et 960px
  • Interface inférieure à 576px :
Aperçu de l'interface inférieure à 576px

Prévoyez une version pour l’impression centrée sur le contenu et dépourvue des éléments suivants : menu, image hero, asides, footer.

Ajoutez des effets de transition lors du redimensionnement de la fenêtre du navigateur.

Assurez du bon fonctionnement de votre interface pour les propriétés nécessitant des préfixes vendeurs (autoprefixer, mixins compass ou bourbon, etc.).

Personnalisez les couleurs de l’interface pour les adapter à votre goût.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.