Création de widgets adaptatifs

display: block;
width: auto;
margin: 0;

Contrairement à la largeur, affectez une hauteur fixe ou minimale au widget ou laissez son contenu déterminer sa hauteur (height: auto. Si le widget est destiné à être fluide, une hauteur automatique est recommandée.

• Utilisez un système de grille CSS pour agencer les éléments de l'interface utilisateur sur des lignes et des colonnes. Par exemple, le système de grille CSS utilisé par les présentations et les conteneurs par défaut agence les éléments de l'interface utilisateur sur une grille comportant 12 colonnes.
• Pour laisser les éléments de l'interface utilisateur se positionner de gauche à droite et de haut en bas, utilisez display: inline-block ou float: left.
  Remarque : Si vous utilisez float: left, veillez à effacer "float" à la fin. Par exemple :

  
  .myContainer:after {
  content: "";
  display: block;
  clear: both;
  }
  

  Cependant, veillez à utiliser float: right à la place pour les langues qui se lisent de droite à gauche.

• Si vous souhaitez afficher des éléments d'interface utilisateur nécessitant un espace horizontal minimal, utilisez overflow: scroll conjointement à min-width. Par exemple, les tableaux. En général, les divs pouvant défiler fonctionnent bien dans la plupart des navigateurs Web sur tablette ou appareil mobile. Cependant, certaines versions anciennes des appareils ou des navigateurs Web peuvent les afficher de façon inappropriée.

• Evitez de fixer la hauteur des blocs de texte dans un conteneur fluide, car le texte peut se repositionner ou retourner à la ligne en cas de changement de la largeur du conteneur. Si vous souhaitez que le bloc de texte possède une hauteur minimale, utilisez min-height.
• Evitez d'utiliser line-height pour spécifier la hauteur d'un bloc de texte de ligne unique, car il ne s'affiche pas correctement si le texte retourne à la ligne. Utilisez une marge interne à la place si vous souhaitez figer le bloc de texte.
• Envisagez d'utiliser display: table-cell si vous souhaitez centrer verticalement le texte qui pourrait retourner à la ligne.

• Si vous utilisez un système de grille CSS adaptative, utilisez-le pour définir le comportement adaptatif, comme l'empilement des colonnes sur les petits écrans.
• Utilisez des requêtes de média CSS pour optimiser le style des widget des différents seuils. Pour se conformer au style par défaut, effectuez une optimisation pour les plages de pages suivantes :

  Points d'arrêt de plage de pages du magasin type Aurora

  Unité	Point d'arrêt de la plage	Plage de pages
  Bureau	RWD-C	1 281 pixels CSS et plus
  Tablette	RWD-B	601 à 1 280 pixels CSS
  Mobile	RWD-A	600 pixels CSS et moins

• Utilisez JavaScript pour fractionner le contenu du widget sur plusieurs pages, en fonction de l'espace disponible. N'oubliez pas que les clients qui utilisent des appareils à écran tactile s'attendent à ce que la pagination fonctionne par glissement. Si cela est possible, mettez en oeuvre la prise en charge des événements tactiles et des événements de pointeur MS.