Tailles de police adaptatives en CSS

Vous savez déjà que les unités rem sont calculées relativement à la taille de police de l'élément racine, par défaut égale à 16px :

csshtml {
  font-size: 16px; /* valeur par défaut */
}

Cette particularité est utilisée pour modifier massivement les tailles de police lorsque la largeur de l'écran change. Voyons comment cela se fait.

Supposons que les tailles suivantes soient attribuées à nos balises :

cssh1 {
  font-size: 1.5rem; /* correspond à 24px */
}
p {
  font-size: 1rem; /* correspond à 16px */
  margin: 2rem;    /* correspond à 32px */
}

Faisons en sorte que les tailles définies via rem changent de manière adaptative lorsque la largeur de l'écran change. Pour cela, nous modifierons la taille de police de l'élément racine en utilisant des requêtes média :

css@media (max-width: 600px) {
  html {
    font-size: 16px;
  }
}
@media (min-width: 600px) and (max-width: 1200px) {
  html {
    font-size: 18px;
  }
}
@media (min-width: 1200px) {
  html {
    font-size: 20px;
  }
}

css@media (max-width: 300px) {
  h1 {
    font-size: 32px;
  }
  h2 {
    font-size: 24px;
  }
  p {
    font-size: 16px;
  }
}
@media (min-width: 300px) and (max-width: 900px) {
  h1 {
    font-size: 36px;
  }
  h2 {
    font-size: 27px;
  }
  p {
    font-size: 18px;
  }
}
@media (min-width: 900px) {
  h1 {
    font-size: 40px;
  }
  h2 {
    font-size: 30px;
  }
  p {
    font-size: 20px;
  }
}