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.

Sauf mention contraire*, l'article Interface adaptable (responsive) en CSS [CSS23] et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Licence Creative Commons

Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International

Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.

* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.

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.