CSS Responsive

Unités

• Ch = character. Permet de mettre par exemple la largeur d'un élément basé sur le nombre de caractères présents dans une ligne de texte. Calculé approximativement, car ch ne compte pas le nb de caractères dans une ligne, mais est basé sur la largeur du caractère 0
• Em : unité relative à l'élément parent : 1em = même taille de police que le parent.
• Rem : unité relative au root (R pour Root).

Breakpoints

• Les plus populaires : https://polypane.app/blog/css-breakpoints-used-by-popular-css-frameworks/
• Xs - min width none / mobile
• Sm - min width 576px
• Md - min width 768px / tablet
• Lg - min width 992-1024px / desktop
• Xl - min width 1200-1216px / widescreen
• Xxl - min width 1400-1408px / fullhd

Tailles responsives

• Eviter les tailles fixes, utiliser plutôt % ou em, ou sinon vw, vh, vmin, vmax
• Si on veut une taille fixe pour les grandes résolutions : utiliser max-width au lieu de width
• max-width: 100%; (pour les petites résolutions), et width fixe pour les grandes
• Texte sur plusieurs colonnes : utiliser column-width (au lieu de column-count), pour n'avoir qu'une colonne en responsive

Media queries

• Eviter d'en utiliser trop souvent, le css doit être de préférence responsive avant l'usage de media queries
• only screen and (min-width: -px)

Layout

Appliquer un modèle de layout naturel avec border-box (= qui respecte toutes les margin et padding) :

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

Utilisation de min, max, clamp

• Min, max, et clamp : non compatibles IE
• Fonction raccourci Clamp
  • clamp(50%, 350px, 100%), qu'on va pouvoir mettre en valeur de la width par exemple.
  • minValue = 50%, valeur préférée ) 350px, maxSize=100%
  • Raccourci de min(max()) : min(100%, max(50%, 350px)