Le Responsive Web Design - Quelques points clés pour réussir l'intégration de vos pages web

Il est possible d’adapter votre application à tout type d’écran et non pas à quelques catégories d’appareils. Voici comment je procède :

1. J'utilise la propriété box-sizing : border-box sur toutes les balises. Cela inclus le padding et la bordure dans la taille des boîtes.

   ​​​​*,*:before,*:after {
   ​​​​    box-sizing: border-box;
   ​​​​}
   

2. Je mets toutes les images à une largeur maximale de 100%.

   ​​​​img {
   ​​​​    max-width: 100%;
   ​​​​    height: auto;
   ​​​​}
   

3. Je préfère utiliser les propriétés max-width pour gérer la largeur des boîtes.

   Si un élément “parent” comporte la propriété display: flex, j'utilise les propriétés flex: 1 1 ##px sur les éléments enfants.

4. j'évite de mettre des hauteurs fixes (par exemple height: 400px ⚠️ ) sur les boîtes (Le contenu pourrait déborder), je préfère alors utiliser la propriété min-height ✅. Pensez également aux unités vh.

5. J'utilise les propriétés display: flex combiné avec flex-wrap: wrap pour que les éléments passent les uns en dessous des autres.

   RAPPEL : Il est rarement utile d'utiliser flex-direction: column;. Rappelez vous que la plupart des balises sont de type "block"

6. J'utilise des media queries seulement si cela est vraiment nécessaire (en derniers recours). L'utilisation abusive de media queries peut devenir compliqué à gérer.

7. Je me sert du selecteur body pour changer la typographie générale

   ​​​​body {
   ​​​​    font-size: larger;
   ​​​​    font-family: 'font1', sans-serif;
   ​​​​}
   ​​​​h1,h2,h3,h4,h5,h6 {
   ​​​​    font-family: 'font2', sans-serif;
   ​​​​}
   

8. Je crée des "classes" pour ne pas me répéter. (Voir méthode BEM)

---

Et n'oubliez pas le proverbe

Dry, don’t repeat yourself

www.alternative-rvb.com | Nicolas Malet | GITHUB | CODEPEN