# 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;
    }

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

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

1. 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.

1. 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._

1. 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.

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

1. 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**.

1. 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;
    }

1. Je crée des "classes" pour ne pas me répéter. ([Voir méthode BEM](https://getbem.com/))

---

Et n'oubliez pas le proverbe
> Dry, don’t repeat yourself

{%hackmd @alternative-rvb/contact %}